About Services Team Blog Contact 


(第 2 版 ) 


Photoshop CC 
网 站 UI 设计 全 程 揭秘 


赵 中 华 编著 


近 60 个 实战 案例 
近 300 分 钟 视频 教程 


近 300 个 素材 源 文件 


Book features 


(四 内 容 全 面 ， 循 序 渐进 技术 专业 ， 易 于 操作 专业 作者 ， 如 临 亲 授 
遵循 从 基础 到 高 级 ;从 六 门 到 精 在 技术 讲解 的 同时 ;配合 丰富 的 作者 来 自 于 一 线 专业 公司 和 高 校 


通 的 思路 ,帮助 读者 轻松 建立 起 操作 练习 ， 理论 与 操作 相 结合 ， 教师 ;实践 与 教学 的 融合 ;更 清 
正确 的 知识 体系 s 使 读者 轻松 理解 和 掌握 知识 点 < 楚 学 习 者 的 知识 需求 。 
扫 码 微 课 ， 碎 片 学 习 源 于 实践 ， 回 归 实 战 海量 资源 ， 辅 助 学 习 
读者 可 以 扫描 书 中 的 二 维 码 ， 利 穿插 大 量 的 实战 操作 案例 ， 均 来 提供 立体 化 的 学 习 资 源 ， 所 有 案 
用 零碎 的 时 间 随 时 随地 通过 视频 源 于 实践 ， 通 过 一 步 步 操作 的 方 例 的 素材 、 源 文件 ;多 媒体 语音 
课程 进行 学 习 。 式 再 现 给 读者 。 视频 教程 ; 与 教学 配套 的 PRT 
课件 。 
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内 容 简介 

本 书 是 一 本 关于 网 站 UI 设 计 的 经 典 之 
作 ， 以 Photoshop CC 为 设计 工具 ， 对 
主流 网 站 UI 设计 流程 和 制作 技巧 进行 了 全 
面 、 细 致 的 剖析 。 

本 书 内 容 简洁 、 通 俗 易 懂 ， 通 过 知识 
点 与 案例 相 结 合 的 方式 ， 让 读者 能 够 清晰 
明了 地 理解 网 站 UI 设计 的 相关 内 容 ， 从 而 
达到 学 以 致 用 的 目的 。 全 书 共 分 11 章 ， 包 
括 网 站 UI 概述 ，Photoshop 基 本 操作 ， 选 
区 、 形 状 和 网 站 图 标 ， 图 层 与 网 页 中 的 按 
钮 ， 钢 笔 、 文 字 和 网 站 导航 ， 调 整 命令 与 
优化 图 像 ， 设 计 网 站 中 的 广告 条 ， 网 站 页 
面 的 配色 ， 网 页 的 版 式 和 布局 ， 移 动 端 网 
站 UI 设 计 ， 商 业 网 站 综合 案例 等 内 容 。 

本 书 结构 清晰 、 实 例 经 典 、 技 术 实 
用 ， 适 合 网 站 UI 设计 初 、 中 级 读者 ， 包 括 
广大 UI 设计 爱好 者 、UIl 设 计 工 作者 ， 也 可 
以 作为 高 等 院 校 Ul 设 计 课程 的 教材 。 
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本 书 是 一 本 关于 网 站 UI 设计 的 经 典 之 作 ， 以 Photoshop CC 为 设计 工具 ， 对 主流 网 站 UI 设计 流程 和 制作 
技巧 进行 了 全 面 、 细 致 的 剖析 。 

本 书 内 容 简 洁 、 通 俗 易 懂 ， 通 过 知识 点 与 案例 相 结合 的 方式 ， 让 读者 能 够 清晰 明了 地 理解 网 站 UI 设 计 
的 相关 内 容 ， 从 而 达到 学 以 致 用 的 目的 。 全 书 共 分 11 章 ， 包 括 网 站 UI 概述 ，Photoshop 基 本 操作 ， 选 区 、 形 
状 和 网 站 图 标 ， 图 层 与 网 页 中 的 按钮 ， 钢 笔 、 文 字 和 网 站 导航 ， 调 整 命令 与 优化 图 像 ， 设 计 网 站 中 的 广告 
条 ， 网 站 页 面 的 配色 ， 网 页 的 版 式 和 布局 ， 移 动 端 网 站 UI 设 计 和 商业 网 站 综合 案例 等 内 容 。 

本 书 结构 清晰 、 实 例 经 典 、 技 术 实 用 ， 适 合 网 站 UI 设计 初 、 中 级 读者 ， 包 括 广大 UI 设计 爱好 者 、UI 设 
计 工 作者 ， 也 可 以 作为 高 等 院 校 UI 设计 课程 的 教材 。 
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在 计算 机 网 络 日 益 普及 的 今天 ， 需 要 越 来 越 多 的 UI 设计 专业 人 才 ， 而 随 着 移动 端 设备 在 人 
们 生活 中 使 用 的 频率 越 来 越 高 ，PC 端 页 面 设计 和 移动 端 界面 设计 都 成 为 UI 设计 人 员 必 须要 掌 
握 的 技能 。Photoshop 作为 目前 非常 流行 的 网 页 设计 软件 ， 和 凭借 其 强大 的 功能 和 易学 易 用 的 特 
性 深 受 广大 从 业者 的 喜爱 。 

本 书 从 网 站 图 标 和 按钮 、 网 站 导航 、 网 站 图 片 、 网 站 广告 条 、 网 站 配色 和 布局 等 多 方面 进 
行 讲解 , 采用 基础 知识 + 应 用 案例 的 方式 , 将 Photoshop 软件 操作 技术 和 网 站 UI 设计 完美 结合 ， 
确保 读者 能 够 快速 掌握 网 站 UI 设计 的 方法 和 技巧 。 全 书 共 分 11 章 ， 各 章 内 容 介绍 如 下 。 

第 1 章 网 站 UI 概述 ， 主 要 讲解 网 页 界面 的 分 类 、 网 站 建设 的 大 致 流程 、 网 页 界面 的 设计 
原则 和 重要 的 构成 要 素 ， 以 及 网 页 设计 的 命名 规范 等 内 容 。 

第 2 章 Photoshop 基本 操作 ， 主 要 详细 讲解 Photoshop 的 一 些 基本 操作 ， 包 括 
Photoshop 简介 、Photoshop 的 安装 、Photoshop 的 文件 操作 、 裁 剪 图 像 、 图 像 的 复制 和 粘贴 、 
图 像 变换 操作 和 还 原 恢 复 操作 等 知识 。 

第 3 章 选区 、 形 状 和 网 站 图 标 ， 主 要 讲解 选区 、 形 状 在 网 页 设计 中 的 应 用 方法 ， 包 括 选 
区 的 创建 、 填 充 与 描 边 、 渐 变 工具 、 形 状 的 创建 和 加 减 ， 以 及 如 何 使 用 Adobe Color Themes 
辅助 配色 等 内 容 。 

第 4 章 图 层 与 网 页 中 的 按钮 ， 主 要 讲解 图 层 的 功能 和 操作 ， 包 括 使 用 图 案 增 加 质感 、 图 
层 的 基本 操作 、 图 层 样 式 的 添加 和 修改 、 使 用 画笔 工具 和 图 像 的 变换 操作 等 内 容 。 

第 5 章 钢笔 、 文 字 和 网 站 导航 ， 主 要 讲解 钢笔 工具 和 文字 在 网 页 设计 中 的 使 用 方法 ， 主 
要 包括 网 页 设计 的 辅助 操作 、 选 区 的 修改 、 加 深 和 减 淡 工 具 、 钢 笔 工具 的 操作 技巧 、 文 字 工 具 ， 
以 及 快速 对 齐 多 个 对 象 等 内 容 。 

第 6 章 调整 命令 与 优化 图 像 ， 主 要 讲解 修饰 图 像 和 调整 图 像 色 调 的 方法 ， 包 括 使 用 图 章 
工具 修饰 图 像 、 修 复 网 页 中 的 图 像 、 自 动 调整 图 像 色调 、 自 定义 调整 图 像 色调 、 锐 化 图 像 ， 以 
及 自动 批 处 理 图 像 等 内 容 。 

第 7 章 设计 网 站 中 的 广告 条 ， 主 要 讲解 使 用 不 同 工 具 进行 抠 图 的 方法 ， 包 括 使 用 磁性 套 
索 工具 、 快 速 选择 工具 、 魔 棒 工 具 、 快 速 蒙 版 和 调整 边缘 抠 图 ， 使 用 修 边 优化 抠 图 效果 和 使 用 
蒙 版 合成 图 像 等 内 容 。 

第 8 章 网 站 页 面 的 配色 , 主要 讲解 色彩 的 基础 知识 、 色 彩 的 视觉 心理 感受 、 网 页 配色 标准 、 
网 页 风格 与 配色 ， 以 及 影响 网 页 配色 的 因素 等 内 容 。 

第 9 章 网 页 的 版 式 和 布局 ， 主 要 讲解 常见 的 网 页 布局 方式 、 网 页 文字 的 设计 原则 、 网 页 
文字 的 排版 规则 和 常用 手法 、 根 据 内 容 确定 布局 方式 的 方法 ， 以 及 页 面 分 割 方式 等 内 容 。 

第 10 章 移动 端 网 站 UI 设计 , 主要 讲解 移动 端 UI 设计 的 规范 和 技巧 ,包括 常见 的 手机 系统 、 
iOS 系统 界面 设计 、Android 系统 界面 设计 以 及 移动 端 与 PC 端 网 页 UI 设计 的 区 别 。 
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第 11 章 商业 网 站 综合 案例 ， 主 要 讲解 两 款 商业 网 站 界面 的 设计 和 制作 步骤 ， 包 括 儿童 类 
网 站 和 手机 购物 网 站 设计 。 
赵 中 华 编著 ， 另 外 张 晓 景 、 李 晓 试 、 高 鹏 、 胡 敏 敏 、 张 国 勇 、 贾 勇 、 林 秋 、 胡 卫 东 
、 周 晓 丽 、 郭 慧 等 人 也 参与 了 本 书 的 部 分 编写 工作 。 本 书 在 写作 过 程 中 力求 严 说， 由 于 
作者 水 平 所 限 ， 书 中 难免 有 疏漏 和 不 足 之 处 , 希望 广大 读者 批评 、 指正 , 欢迎 与 我 们 沟通 和 交流 
QQ 群 名 称 : 网 页 设计 与 开发 交流 群 ，QQ 群 号 : 705894157。 
为 了 方便 读者 学 习 ， 本 书 为 每 个 实例 提供 了 教学 视频 ， 只 要 扫描 一 下 书 中 实例 名 称 旁 边 的 
二 维 码 ， 即 可 直接 打开 视频 进行 观看 ， 或 者 推送 到 自己 的 邮箱 中 下 载 后 进行 观看 。 本 书 配套 的 
立体 化 学 习 资源 中 提供 了 书 中 所 有 实例 的 素材 源 文件 、 最 终 文件 、 教 学 视频 和 PPT 课件 ， 并 附 
赠 海量 实用 资源 。 读者 在 学 习 时 可 扫描 下 面 的 二 维 码 ， 然后 将 内 容 推 送 到 自己 的 邮箱 中 ， 即 可 
下 载 获 取 相应 的 资源 ( 注意: 请 将 这 两 个 二 维 码 下 的 压缩 文件 全 部 下 载 完毕 后 ， 再 进行 解压 ， 
即 可 得 到 完整 的 文件 内 容 )。 
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[1 了 解 网 站 UI 9) 


网 页 是 一 个 包含 文字 、 图 像 和 各 种 多 媒体 文件 的 HTML 文档 ， 根 据 网 页 的 具体 内 容 将 其 划分 为 
环境 性 界面 、 功 能 性 界面 和 情感 性 界面 3 种 类 型 。 


人 人 十 网 由 庆 轨 (Dj 
通俗 地 说 ， 一 张 网 页 就 是 一 个 HTML 格式 的 文档 ， 这 个 文档 又 包含 文字 、 图 片 、 声 音 和 动画 视 
频 等 其 他 格式 的 文件 ， 这 张 网 页 中 的 所 有 元 素 被 存储 在 一 台 与 互联 网 相连 接 的 计算 机 中 。 
当 用 户 发 出 浏览 这 张 页 面 的 请 求 时 , 就 由 这 人 台 计 算 机 将 页 面 中 的 所 有 元 素 发 送 至 用 户 的 计算 机 ， 
然后 再 由 用 户 的 浏览 器 将 这 些 元 素 按照 特定 的 布局 方式 显示 出 来 , 这 就 是 我 们 实际 看 到 的 网 页 样子 。 


通过 研究 调查 发 现 ， 现 阶段 人 们 可 以 根据 网 页 页 面 的 具体 内 容 将 其 分 为 以 下 三 大 类 。 

名” 环境 性 界面 : 环境 性 网 页 界面 所 包含 的 内 容 非常 广泛 ， 涵 盖 政 治 、 经 济 、 文 化 、 娱 乐 、 科 技 、 
民族 和 宗教 等 领域 。 

名 功能 性 界面 : 功能 性 网 页 界面 是 最 常见 的 网 页 类 型 ， 它 的 主要 目的 就 是 展示 各 种 商品 和 服务 的 
特性 及 功能 ， 以 吸引 用 户 消费 。 我 们 常见 的 各 种 购物 网 站 和 各 个 公司 的 网 站 基本 都 属于 功能 性 
界面 。 

日 ”情感 性 界面 : 情感 性 网 页 界面 并 不 是 指 网 页 内 容 ， 而 是 指 网 页 通过 配色 和 版 式 构建 出 某 种 强烈 
的 情感 氛围 ， 引 起 浏览 者 的 认同 和 共鸣 ， 从 而 达到 预期 目的 的 一 种 表现 手法 。 


[1.2 三 网 站 建设 流程 D 


使 用 Photoshop 设计 和 制作 一 张 静 态 页 面 也 许 并 不 是 一 件 很 困难 的 事 ， 但 要 搭建 起 一 个 完整 的 
网 站 ， 保 持 各 种 功能 正常 运行 ， 并 随时 更 新 页 面 中 的 信息 ， 却 不 是 在 短 时 间 内 能 够 做 好 的 。 网 站 的 
建设 和 维护 周期 很 长 ， 一 般 来 说 可 以 简单 分 为 以 下 6 个 步骤 ， 如 图 1-1 所 示 。 
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域名 虚拟 网 页 
注册 主机 设计 
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网 站 网 站 网 站 
建设 测试 维护 


域名 是 用 点 分 隔 的 名 字 组 成 的 字符 串 ， 用 于 在 数据 传输 时 标示 计算 机 的 具体 位 置 。 注 册 


域名 是 在 网 站 建设 流程 中 首先 要 考虑 的 事情 


域名 选择 的 基本 原则 是 简单 、 易 于 记忆 ， 使 浏览 者 一 


看 到 页 面 就 能 自然 而 然 地 联想 到 域名 ， 例 如 httpy/Awww.baidu.com/。 
域名 在 全 世界 具有 唯一 性 ， 好 的 域名 有 助 于 企业 形象 的 塑造 。 下 面 是 一 些 比较 常见 的 顶级 域名 


摘录 ， 如 表 1-1 所 示 。 


表 1-1 常见 的 顶级 域名 摘录 


用 途 用 途 
商业 机 构 (个 人 也 可 注册 ) 医生 、 会 计 师 
网 络 服务 机 构 旅游 网 站 
非 营利 性 组 织 博物 馆 
航空 机 构 
$b 政 机 构 
娱乐 机 构 
asa | 亚洲 机 构 
i 国际 机 构 


虚拟 主机 是 在 网 络 服务 器 上 划分 出 一 定 的 
的 站 点 功能 、 数 据 存放 和 传输 功能 。 


磁盘 空间 ， 供 用 户 放 置 站 点 、 应 用 组 件 等 ， 提供 必要 


虚拟 主机 提供 商 一 般 可 以 向 用 户 提供 10GB、20GB、30GB 或 者 更 高 的 虚拟 主机 空间 ， 这 个 空 


间 与 我 们 熟悉 的 网 络 带宽 一 样 。 带 宽 越 大 ， 同 
浏览 到 网 页 中 的 内 容 。 


一 时 间 段 内 可 传输 的 数据 量 就 越 大 ， 用 户 就 能 更 快 地 


对 于 经 济 实力 雄厚 的 企业 来 说 ， 可 以 考虑 购置 属于 自己 的 独立 服务 器 ， 这 可 以 让 浏览 者 更 快速 
地 浏览 页 面 ， 而 且 易于 管理 ， 但 购置 成 本 较 主 机 托管 要 高 。 中 、 小 企业 一 般 无 力 购置 自主 的 服务 器 ， 


大 部 分 会 选择 主机 托管 的 方式 。 图 1-2 所 示 为 


通常 可 以 使 用 一 种 特殊 的 技术 把 一 台 真 实 的 物理 


ll 


市 面 上 一 些 比较 常见 的 虚拟 主机 。 


友 


计算 机 主机 分 割 成 多 个 逻辑 存储 单元 ， 每 个 单元 都 没有 物理 实 


体 , 但 是 它们 都 能 像 真 实 的 物理 主机 一 样 在 网 络 上 工作 ,具有 单独 的 域名 、IP 地 址 以 及 完整 的 Internet 服务 器 功能 。 


在 外 界 看 来 ， 虚 拟 主机 与 真正 的 主机 没有 任何 区 别 。 
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主机 和 域名 的 问题 解决 之 后 ， 就 可 以 着 手 设计 和 制作 网 页 界面 了 。 设 计 页 面 之 前 ， 首 先 要 收集 
需要 放 到 页 面 中 的 具体 信息 和 内 容 ， 将 它们 合理 分 类 ， 然 后 科学 严谨 地 确定 出 网 站 的 主 色 调 ， 并 制 
作出 每 个 独立 的 静态 页 面 。 
每 个 独立 的 页 面 制作 完成 以 后 ， 还 要 分 别 对 它们 进行 切片 ， 这 也 是 一 项 非常 重要 的 工作 。 如 果 
切 图 不 合理 ， 很 可 能 会 给 后 期 的 程序 搭建 带 来 很 大 的 麻烦 ， 造 成 功能 模块 实现 方式 不 合理 ， 或 者 下 
载 速度 缓慢 等 现象 ， 带 给 用 户 糟糕 的 浏览 体验 ， 如 图 1-3 所 示 为 完整 的 网 页 和 切 图 后 的 文件 来。 


SmileLife:) = 


该 隆 快 乐 戌 才 ! | 


Smile Life:) | 
YY 


区 网 站 建设 “全 

网 站 建设 是 最 重要 的 一 步 ， 这 一 步 的 主要 工作 就 是 利用 DIV+CSS 样式 将 上 一 步骤 确定 的 静态 页 
面 转换 为 动态 页 面 。 在 建设 网 站 前 必须 准备 充分 的 资料 ， 最 好 可 以 画 一 张 流程 图 ， 如 图 1-4 所 示 。 
人 


® eee 


图 1-4 


每 个 公司 或 者 每 个 团队 网 站 建设 的 具体 流程 其 实 都 是 不 一 样 的， 但 是 ， 基 本 上 大 方向 是 一 致 的 ,不 一 样 的 地 方 
是 根据 公司 或 团队 习惯 决定 的 。 


3 网 站 测试 一 辐 
网 站 建设 完成 后 还 需要 对 其 进行 试 运行 ， 确 保 网 站 的 各 个 功能 和 模块 都 能 够 正常 工作 ， 不 会 出 


NE 
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现任 何 丝 漏 。 网 站 测试 工作 包括 5 方面 内 容 : 功能 测试 、 性 能 测试 、 可 用 性 测试 、 兼 容 性 测试 和 安 
全 测试 ， 更 细致 的 内 容 如 图 1-5 所 示 。 


2 网 站 维护 。”(@ 1 功能 测试 


连接 测试 
表单 测试 
Cookies 测 试 


一 个 好 的 网 站 需要 定期 或 不 定期 地 更 新 内 容 ， [ 汪 . 
才能 不 断 地 吸引 更 多 的 浏览 者 ， 增 加 访问 量 ， 并 在 教 据 库 测 
激烈 的 市 场 竞争 中 抓 住 商机 ， 这 就 是 网 站 维护 的 意 连接 速度 测试 
义 。 网 站 维护 的 内 容 主要 包括 以 下 5 个 方面 。 2 性 能 测试 { sams 
句 ”服务 器 软件 维护 : 包括 服务 器 、 操 作 系统 和 网 

络 连 接线 路 等 方面 ， 以 确保 网 站 可 以 24 小 时 二 

不 间断 正常 运行 。 网 站 测试 图 形 测试 
@@ 服务 器 硬件 维护 ， 防 止 由 于 服务 器 硬件 设备 和 3 可 用 性 测试 人 内 容 测试 

网 络 设备 出 现 各 种 问题 而 导致 网 站 竣 痪 ， 及 时 整体 界面 测试 

发 现 和 处 理 漏洞 。 平台 测试 
回 ”网 站 内 容 更 新 : 只 有 不 断 地 更 新 页 面 信息 ， 才 4 兼容 性 测试 {， 

能 保证 网 站 的 生命 力 ， 从 而 不 断 吸 引用 户 的 关 浏览 器 测试 

注 。 内 容 更 新 是 网 站 维护 中 的 一 个 瓶颈 ， 即 5 安全 测试 

使 在 建站 初期 砸 入 再 多 的 钱 制 作 华美 炫目 的 特 图 1.5 


效 ， 但 如 果 长 期 不 对 页 面 内 容 更 新 ， 也 难 逃 被 淘汰 的 命运 。 

句 ”网 站 安全 维护 : 这 个 世界 上 不 存在 永远 没有 漏洞 的 网 站 ， 一 旦 查 出 漏洞 后 ， 就 要 以 最 快 的 速度 
进行 处 理 和 补救 ， 以 免 给 黑客 和 不 法 分 子 留 下 可 乘 之 机 。 

名 ”制定 维护 规定 : 网 站 维护 还 应 该 制定 相关 的 规定 ， 将 网 站 维护 制度 化 、 规 范 化 ， 确 保 大 部 分 的 
操作 都 有 章 可 循 。 


网 页 设计 的 原则 2 | 


网 页 设计 的 基本 原则 有 视觉 美观 、 主 题 明确 、 内 容 与 形式 相 统 一 、 快 速 下 载 , 以 及 为 用 户 考虑 等 ， 
符合 这 些 要 求 的 网 页 往往 更 容易 受到 用 户 的 青睐。 


党 关 观 一 二 


视觉 美观 是 网 页 设计 最 基本 的 原则 。 试 想 一 下 ， 如 果 一 个 网 页 的 用 色 俗气 ， 版 式 杂 乱 无 章 ， 文 
字 难 以 辨认 ， 而 且 错 字 频 出 …… 这 样 一 个 设计 糟糕 的 页 面 连 让 用 户 看 第 二 眼 的 欲望 都 没有 ， 又 何 谈 
宣传 推广 ， 招 挠 顾客 ? 

下 面 是 两 个 设计 精美 时 尚 的 网 站 页 面 ， 这 些 页 面 无 论 从 配色 、 版 式 再 到 动画 特效 ， 都 让 用 户 感 
到 由 衷 的 尾 意 ， 这 样 的 网 页 无 疑 能 够 赢得 用 户 的 追捧 ， 如 图 1-6 所 示 。 
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3 主题 明确 一 全 
如 果 要 建设 一 个 成 功 的 网 站 ， 在 设计 静态 页 面 时 就 应 该 考虑 页 面 的 内 容 有 哪些 ? 你 的 用 户 需要 

哪些 信息 ?应 该 通过 怎样 的 表现 方式 来 使 用 户 以 最 快 的 速度 找到 他 们 想 要 的 信息 ? 
这 就 要 求 网 页 界面 有 一 个 清晰 明确 的 主题 ， 页 面 中 的 所 有 信息 和 元 素 都 围绕 这 个 主题 来 展开 叙 


述 ， 让 用 户 看 一 眼 就 能 明白 页 面 要 表达 的 意思 ， 如 图 1-7 所 示 。 


< 内 容 与 形式 相 统 一 一 @ 


网 页 的 内 容 主要 是 指 Logo、 文 字 、 图 片 、 动 画 等 要 素 ， 形 式 则 是 指 整体 版 式 和 不 同 内 容 的 布局 

方式 ， 一 个 合格 的 网 页 应 该 是 内 容 和 形式 高 度 统一 的 ， 我 们 需要 做 好 以 下 两 方面 的 工作 。 

名 ”表现 形式 要 符合 主题 的 需要 : 一 个 页 面 如 果 只 是 一 味 地 追求 花哨 的 表现 形式 ， 过 于 强调 创新 而 
忽略 具体 内 容 ， 或 者 只 追求 功能 和 内 容 而 采用 平淡 乏味 的 表现 形式 ， 都 会 使 页 面 变 得 苍白 无 力 。 
只 有 将 这 二 者 有 机 统一 ， 才 能 真正 设计 出 独 具 一 格 的 页 面 ， 如 图 1-8 所 示 。 

名 ”确保 每 个 元 素 存在 的 必要 性 : 设计 页 面 时 ， 要 确保 每 个 元 素 都 是 有 必要 存在 的 ， 不 要 单纯 为 了 
展示 所 谓 的 高 水 准 设计 和 新 技术 添加 一 些 没有 意义 的 元 素 , 这 会 使 用 户 感到 强烈 的 无 所 适 从 感 ， 
如 图 1-9 所 示 。 


Movida Sydney ~ Surry 
Hlg Spanish Restaurant 


E54 快速 加 载 一 葬 


这 也 是 一 条 很 重要 的 准则 。 试 想 一 下 ， 假 如 你 要 进 一 个 网 站 买 件 TT 恤 ， 可 是 进去 30 秒 后 还 只 能 
看 到 文字 ， 根 本 无 法 看 到 T 恤 的 样子 ， 而 你 搜索 出 来 的 T 恤 列 表 有 50 页 …… 你 还 有 耐心 继续 看 下 
去 吗 ? 
就 现在 的 趋势 来 看 ， 网 页 中 最 多 的 元 素 非 图 片 莫 属 ， 所 以 要 加 快 网 页 加 载 速度 ， 还 要 从 页 面 切 
图 和 优化 存储 图 片 下 手 ， 能 通过 代码 实现 的 ( 例如 纯色 背景 、 直 线 、 没 有 图 层 样式 的 普通 文字 ) 就 不 
要 切 图 ， 能 用 1 像素 平 铺 出 来 的 就 不 要 切 2 像素 , 能 用 32 色 存储 的 就 不 要 用 64 色 ， 如 图 1-10 所 示 。 


各 
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Meet Geckoboard. 
It's Your Key Data, 
In One PI 


图 1-10 


3 为 用 户 考 虑 @ 


网 站 制作 的 目的 就 是 吸引 用 户 了 解 并 购买 自己 的 产品 ， 所 以 就 需要 设身处地 地 考量 网 页 中 的 每 
一 个 细节 ， 具 体 来 说 包括 以 下 3 个 方面 。 
回 ”考虑 用 户 的 带宽 : 设计 和 制作 网 页 时 需要 考虑 目标 群体 的 网 络 连接 速度 。 如 果 大 部 分 用 户 的 网 

络 连 接 状 况 良好 ， 带 宽 较 大 ， 就 可 以 在 页 面 中 多 加 入 一 些 Flash 动画 、 声 音 ， 甚 至 视频 和 插件 等 

多 媒体 元 素 ， 来 塑造 出 更 立体 丰满 的 网 页 效果 。 


如 果 大 部 分 用 户 的 带宽 较 小 ， 就 要 尽 可 能 少 用 颜色 复杂 的 图 片 ， 以 及 声音 和 视频 等 体积 庞大 且 非 必要 的 元 素 ， 
以 保证 页 面 加 载 速度 。 


名 ”考虑 用 户 的 浏览 器 : 市 面 上 的 浏览 器 很 多 ， 除 了 IE 之 外 ， 也 有 很 多 人 喜欢 用 火狐 、360、 
Chrome 等 浏览 器 上 网 。 这 就 要 求 在 后 期 编写 代码 时 在 兼容 性 上 下 足 功 夫 ， 使 页 面 在 大 部 分 的 主 
流 浏览 器 中 都 能 够 正常 显示 。 

名 ”简化 操作 流程 : 如 果 能 依靠 美观 舒适 的 外 观 吸引 到 浏览 者 ， 那 么 网 站 中 各 种 功能 的 布局 和 操作 
流程 就 是 能 否 留 住 用 户 的 关键 所 在 了 。 有 一 个 著名 的 3 次 单 击 原则 ， 主 张 任何 操作 都 不 应 该 超 
过 3 次 单 击 ， 否 则 浏览 者 的 耐心 会 很 快 消失 ， 如 图 1-11 所 示 。 


BD MotocMs 


Powerful Flash CMS 


FREETRIAL | TAKEATOUR 


图 1-11 


1.4 网 页 的 构成 元 素 be 
网 页 中 的 元 素 多 种 多 样 ， 其 中 比较 常见 的 有 文字 、 图 人像、 动画、 音频 和 视频 等 ， 还 有 通过 代码 


实现 的 各 种 动态 交互 效果 。 这 些 元 素 都 各 有 特点 ， 合 格 的 设计 师 总 是 可 以 将 不 同 的 元 素 有 条 有 理 地 
组 合 在 一 起 ， 制 作出 一 个 美观 协调 的 页 面 。 


[到 


ns 


文字 最 大 的 优势 主要 体现 在 两 方面 : 一 是 体积 小 。50 个 中 文字 符 只 占 1KB， 但 如 果 将 这 50 个 
汉字 以 黑色 黑体 12 点 存储 为 JPG 图 像 ， 却 需要 至 少 30KB。 

二 是 信息 传达 效果 明确 。 同 样 一 张 图 像 ， 在 不 同 的 人 眼 里 总 是 会 被 解读 成 不 同 的 含义 。 但 文字 
却 不 同 ， 只 要 是 识字 的 人 ， 基 本 都 能 很 准确 地 接收 到 所 要 表达 的 意思 。 
如 图 1-12 所 示 为 两 个 包含 大 片 文字 的 网 页 。 由 此 可 见 ， 只 要 功夫 到 家 ， 即 使 是 最 不 起 眼 的 文 


字 同 样 可 以 充满 设计 感 。 


网 页 中 的 文字 通常 包括 标题 、 正 文 、 信 息 和 文字 链接 4 种 类 型 。 其 中 正文 的 篇 幅 往 往 会 比较 大 ， 所 以 设计 版 面 
时 也 要 照顾 到 文字 ， 最 好 能 够 把 大 片 的 文字 分 割 成 几 块 ， 以 免 版 面 呆板 或 失调 ， 降 低 整体 的 美观 度 


图 像 6 
现 如 今 的 网 页 设计 领域 可 谓 色 彩 横行 、 图 片 当道 ， 如 图 1-13 所 示 。 这 也 难怪 ， 毕 竟 相 较 于 文 


字 来 说 ， 具 体 直观 、 色 彩 丰 富 的 图 像 更 能 刺激 人 们 的 感官 。 


oa 一 car 


Gross gathering 
DO wpsmmm 
15% 
0784t 3% 4% 8% 
时 ee 兰 低 
es 


而 且 依 托 先进 完善 的 图 像 压 缩 技术 ， 即 使 是 色彩 过 渡 极 其 丰富 的 图 像 ， 也 能 够 在 保证 品质 的 前 
提 下 被 压缩 到 一 个 令 人 满意 的 体积 ， 我 们 又 何 乐 而 不 为 呢 ? 


> 


在 网 页 设计 中 ,各 种 色 块 主要 用 来 连接 和 过 渡 不 同 的 元 素 和 版 块 ， 从 而 使 页 面 整体 效果 更 平衡 、 
协调 、 丰 富 。 
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根据 页 面 类 型 和 内 容 的 不 同 ， 所 使 用 的 颜色 也 应 该 随 之 变化 ， 例 如 环保 旅游 类 的 网 页 可 以 使 
蓝 色 或 绿色 ， 儿童 类 网 站 最 好 使 用 天 蓝 色 、 粉 色 或 黄色 ， 女 性 美容 养生 类 页 面 适合 使 用 粉红 色 等 。 


网 页 界面 中 的 多 媒体 元 素 主 要 包括 动画 、 音 频 和 视频 ， 随 着 Flash 动画 逐渐 退出 互联 网 行业 
HTML 5 动画 得 到 了 更 为 普遍 的 应 用 。 
如 图 1-14 所 示 为 色彩 在 网 页 中 的 完美 应 用 ， 如 


JANKOWALSKI 


1-15 所 示 为 多 媒体 在 网 页 中 的 完美 应 用 。 


加 


SPRAWOZ WASZA 
oferte 
< 


TREE PMNOWANE Poke 


YouR Go 
WASHEOARD ABS 


asnocxen 


这 些 多 媒体 元 素 的 应 用 能 够 使 网 页 更 时 尚 、 更 酷 炫 ， 但 在 使 用 前 - 定 要 确定 用 户 的 网 络 带宽 是 否 能 够 快速 下 载 
这 样 的 高 数据 量 ， 不 要 单纯 为 了 炫 炮 高 新 技术 而 降低 用 户 的 体验 ， 这 是 很 不 明智 的 做 法 
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一 个 完整 的 页 面 往往 包含 很 多 部 分 ， 例 如 导航 、Banner、 菜 单 、 主 体 、 版 底 和 Logo 等 ， 使 用 
Photoshop 设计 页 面 时 按照 规定 的 准则 命名 图 层 或 图 层 组 ， 如 表 1-2 所 示 。 不 仅 有 利于 快速 查找 和 
修改 页 面 效 果 ， 还 可 以 大 幅度 提高 切 图 和 后 期 制作 的 工作 效率 。 下 图 是 网 页 的 基本 框架 和 结构 ， 设 
计 网 页 时 ， 最 好 将 同一 区 域 的 图 层 整合 在 一 起 ， 如 图 1-16 所 示 。 


可 


色 ， 
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表 1-2 图 层 或 图 层 组 命名 准则 


组 件 命名 
头 Header 下 载 Download 
内 容 Content/Container 搜索 Search 
页 脚 Footer 滚动 条 Scroll 
导航 Nav 标签 页 Tab 
子 导航 Subnav 文章 列表 List 
侧 栏 Sidebar 小 技巧 Tips 
栏目 Column 标题 Title 
广告 Banner 加 入 Joinus 
主体 Main 注释 Note 
左 / 右 / 中 Left/Right/Center 友情 链接 Friendlink 
菜单 Menu 服务 Service 
子 菜单 Submenu 状态 Status 
注册 Register 合作 伙伴 Partner 
登录 Login 摘要 Summary 
标志 Logo 版 权 Copyright 
按钮 Btn 指南 Guild 
图 标 Icon 
热点 Hot 
新 闻 News 
标志 : Logo 
[| 
[一 一 志 导航 ;Nav 
Soe | 
菜单 : Menu 主体 : Main 主体 右 : Right 


[一 row 


1.6 甘 移 动 端 UI 设 计 


现 如 今 ， 智 能 手机 已 经 成 为 普通 大 众 的 生活 必需 品 ， 手 机 的 功能 也 越 来 越 完 善 ， 于 是 移动 UI 设 
计 逐 渐 走 进 人 们 的 视野 。 


让 移动 端 UI 设计 概述 ”@ 
移动 端 Ul 设计 就 是 手机 软件 的 人 机 交互 、 操 作 逻 辑 、 界 面 美观 的 整体 设计 。 置 身 于 手机 操作 系 
统 中 的 人 机 交互 的 窗口 ， 设 计 界面 必须 基于 手机 的 物理 性 和 软件 的 应 用 特征 进行 合理 设计 。 


2 移动 端 和 PC 端 UI 设计 的 区 别 
与 PC 端 软件 界面 相 比 ， 移 动 端 Ul 设计 有 着 更 多 的 局 限 性 和 其 独 有 的 特征 。 这 种 局 限 性 主要 来 
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自 于 手机 屏幕 尺寸 的 限制 ， 下 面 是 移动 端 UI 设计 和 PC 端 UI 设计 的 一 些 区 别 。 
1 屏幕 变 小 ， 字 体 变 大 


在 小 屏幕 上 显示 的 内 容 ， 应 该 适当 地 增加 大 小 ， 让 用 户 能 够 更 轻松 地 阅读 和 消化 。 通 常 ， 在 移 
动 端 上 ， 每 行 容纳 的 英文 字符 大 小 在 30 ~ 40pt 最 为 合理 ， 而 这 个 数量 基本 上 是 桌面 端的 一 半 左 右 。 


2. 排版 布局 和 内 容 形式 的 优化 2 


从 PC 端 迁移 到 移动 端 ， 应 该 让 用 户 更 易于 访问 ， 形 态 也 需要 跟随 着 平台 的 变化 而 进行 适当 的 
优化 和 修改 。 对 于 整体 尺寸 和 排版 布局 的 设计 ， 应 该 更 有 针对 性 。 


大 量 的 大 尺寸 图 片 需 要 跟着 移动 端的 需求 而 进行 优化 ， 考 虑 到 移动 端 设备 上 用 户 的 浏览 方式 ,图片 最 好 被 切割 
为 方形 ,或 者 是 和 手机 屏幕 比例 相近 的 形状 ， 选 择 尺寸 更 合理 的 图 片 ， 放 弃 不 匹配 移动 端 需求 的 JS 动 效 等 。 


所 有 的 按钮 或 者 可 点 击 的 元 素 都 按照 用 户 的 手持 方式 ， 放 到 手指 最 易于 触发 的 位 置 ， 如 图 1-17 
所 示 。 


3. 去 除 不 必要 的 动 效 


在 PC 端 网 页 上 ， 旋 转动 效 和 视差 滚动 常常 会 让 网 页 看 起 来 非常 不 错 ;但 是 在 移动 端 上 ， 情 况 
则 完全 不 同 。 内 容 在 迁移 到 移动 端的 网 页 和 App 上 的 时 候 ， 效 率 和 可 用 性 始终 是 第 一 需求 。 快 速 无 
缝 的 加 载 和 即 点 即 用 的 交互 是 用 户 的 首要 和 需求， 剥离 花哨 和 无 用 的 动 效 ， 会 让 用 户 感觉 更 好 。 


作为 开设 计 师 ， 你 需要 围绕 着 点 击 和 滑动 这 两 种 交互 来 构建 移动 端 体验 ， 悬 停 动 效 要 去 掉 。 移 动 端 上 手指 触摸 
E 要 的 交互 手段 ， 悬 停 动 效 是 毫 无 意义 的 存在 。 


4. 精简 导航 系统 


当 用 户 打开 App 的 时 候 ， 通 常 倾向 于 执行 特定 的 操作 ， 访 问 特定 的 页 面 。 如 果 你 希望 他 们 单 击 
特定 的 按钮 ， 所 有 的 这 些 操作 能 否 实现 ， 大 多 是 要 基于 导航 模式 的 设计 。 


所 ， 


DP 


在 PC 端 网 页 上 ， 一 个 可 用 性 较 强 的 导航 能 够 承载 多 个 层级 、 十 几 个 甚至 二 十 多 个 不 同 的 导航 
条 目 ; 但 是 在 移动 端 上 ， 屏 幕 限制 和 时 间 限 制 往 往 让 用 户 来 不 及 也 不 愿意 去 浏览 那么 多 类 目 。 

移动 端的 导航 需要 精简 优化 ， 不 用 沿用 PC 端的 导航 模式 ， 可 以 采用 侧 边栏 或 者 底部 导航 等 
更 适合 移动 端的 方式 。 搞 清楚 整个 导航 的 关键 元 素 之 后 ， 就 可 以 有 针对 性 地 做 优化 和 调整 了 ， 如 
1-18 所 示 。 


列 


人 条 侍 > 
son 一 
1 业 © 
向。 下。 
© 加 © 
四 FW aa 
男 二 
可 的 可 
国 * 
FY wun 
全 二 二 


5. 每 屏 完成 一 项 任务 即 可 。 


虽然 手机 的 屏幕 越 来 越 大 ， 但 是 当 你 的 内 容 在 移动 端 设备 上 呈现 的 时 候 ， 依 然 要 保证 每 屏 只 执 
行 一 个 特定 的 任务 ， 不 要 堆积 太 多 的 内 容 。 
用 户 的 习惯 和 多 样 的 应 用 场景 使 移动 端 界面 必须 保持 界面 与 内 容 的 简单 直观 ， 这 样 用 户 在 繁复 
的 操作 中 ， 不 至 于 迷失 或 者 感到 混乱 ， 如 图 1-19 所 示 。 


sem Bas Ea 


关于 “移动 端 UI 设计 ”的 具体 内 容 ， 将 在 本 书 第 10 章 中 进行 详细 讲解 。 如 果 用 户 有 什么 关于 移动 端 网 页 设计 
的 问题 ， 请 转 至 本 书 第 10 章 中 继续 学 习 。 


时政 Photoshop 基本 操作 。 2 


本 章 主要 介绍 一 些 关 于 Photoshop 的 基础 知识 ， 包 括 安装 Photoshop、 裁 前 图 像 、 图 像 的 复制 与 
粘贴 、 变 换 图 像 、 人 作 ， 以 及 内 容 。 通 过 对 本 章 内 容 的 学 习 ， 读者 应 该 对 


Photoshop 的 基本 


Photoshop 简介 只 


Photoshop 是 一 款 专业 的 图 像 处 理 和 合成 软件 ， 主 要 用 于 处 理 位 图 图 像 。 它 能 够 实现 对 图 像 的 
色彩 调整 , 可 以 实现 不 同 格式 图 像 的 转换 , 还 可 以 使 用 丰富 的 滤 镜 命令 为 图 像 添 加 各 种 艺术 化 的 效果 ， 


甚至 可 以 完成 对 3D 对 象 的 贴图 绘制 和 视频 的 优化 编辑 。 
Photoshop 的 安装 9 
在 初次 使 用 Photoshop 软件 时 ， 用 户 需要 做 的 第 一 件 事情 就 是 安装 Photoshop， 下 面 就 来 学 习 
一 下 如 何 安装 该 软件 。 


实例 1 一 一 安装 Photoshop 


在 开始 Photoshop 的 学 习 辐 
之 前 ， 我 们 先 向 大 家 介绍 一 下 
Photoshop 的 安装 过 程 ， 方 便 
户 之 后 的 学 习 。 


* 源 文件 : 无 
操作 视频 视频 第 2 章 \ 安 装 Photoshop.mp4 


DO1 首先 在 Adobe 官网 中 下 载 Adobe Creative Cloud 软件 ， 打 开 软 件 注册 Adobe ID， 登 录 后 找 
到 Photoshop CC， 如 图 2-1 所 示 。 单 击 “ 试 用 ”按钮 下 载 软件 ， 如 图 2-2 所 示 。 

三 软件 下 载 进度 以 百分比 呈现 ， 如 图 2-3 所 示 。 软 件 下 载 完成 后 会 自动 解压 ， 无 需 手动 解压 ， 
解压 完成 过 后 ，Adobe Creative Cloud 如 图 2-4 所 示 。 


有 大 > 


; 轩 Ee 
图 2-3 图 2-4 
三 单 击 “开始” 按钮， 执行 “所 有 程序 ”> Adobe Photoshop CC 2018 命令 ， 如 图 2-5 所 示 。 
弹出 Photoshop CC 启动 界面 ， 如 图 2-6 所 示 。 


国 Adobe Dreamweaver C56 
国 Adobe eaendscript Toclkit cs6 
凡 Adobe Extension Manager CS6 


国 Adobe photoshop CS6 (64 BO) 
国 Adobe premiere Pro cc 2017 


本 实例 中 安装 的 软件 为 Photoshop CC 2018 试 用 版 ,使 用 七 天 后 试用 版 软件 将 会 过 期 , 如果 用 户 想 要 继续 使 用 软件 ， 
可 以 购买 官方 正版 软件 。 


Photoshop 的 文件 操作 p 


在 开始 学 习 Photoshop 的 各 项 功能 之 前 ， 首 先 要 了 解 并 掌握 一 些 关 于 文件 的 基本 操作 ， 例 如 新 
建 和 保存 文件 、 打 开 文 件 、 修 改 图 像 大 小 和 修改 画布 大 小 等 。 


新建 文件 D 


在 着 手 创作 各 种 作品 之 前 ， 必 须 先 创建 新 的 文档 。 在 Photoshop 中 ， 用 户 可 以 使 用 多 种 操作 方 
式 新 建文 档 ， 如 使 用 菜单 命令 或 快捷 键 等 。 
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执行 “文件 ” >“ 新 建 ”命令 ， 

或 者 按 快捷 键 Ctt+N， 弹 出 “新 

建文 档 ” 对 话 框 。 用 户 可 在 此 对 

话 框 中 指定 新 文档 的 “名 

称 ” “分辨 率 ”和 “颜色 模式 ” 

等 属性 。 设 置 完成 后 单 击 “ 确 

定 ” 按 钮 ， 即 可 完成 新 文档 的 

创建 ， 如 图 2-7 所 示 。 

回 名称: 顾名思义 ，“ 名 称 ” 
选项 用 于 指定 新 文档 的 名 称 。 
若 不 指定 ， 则 会 按照 未 标 
题 -1、 未 标题 -2、 未 标题 -3 
的 顺序 命名 。 

四 预 设 : “ 预 设 ”列表 中 存放 了 很 多 预先 设置 好 的 标准 文档 尺寸 用户 可 以 根据 自己 的 操作 需求 
选用 不 同 的 预 设 尺寸 。 

加 宽度/ 高度: “宽度 ”/ “高度 ” 选项 用 于 设 定 新 文档 的 宽度 和 高 度 ， 用 户 只 需 先 确定 相应 的 单位 ， 
例如 厘米 、 像 素 等 ， 然 后 直接 在 文本 框 中 输入 具体 数值 即 可 。 

回 ”存储 预 设 /删除 预 设 : 单 击 “存储 预 设 ”按钮 ， 弹 出 “新 建文 档 预 设 ”对 话 框 。 输 入 预 设 的 名 称 
并 选择 相应 的 选项 ， 可 以 将 当前 设置 的 文件 大 小 、 分 辨 率 、 颜色 模式 等 创建 为 一 个 预 设 。 使 用 
时 只 需要 在 “ 预 设 ”下 拉 列 表 中 选择 该 预 设 即 可 ， 同 时 也 可 以 使 除 预 设 ”按钮 删除 预 设 。 

加 “分辨 率 : 该 选项 用 来 指定 图 像 的 分 辩 率 ， 下 拉 列 表 中 包含 “像素 /英寸 和 “像素 /厘米 ” 两 个 
选项 ， 用 户 可 根据 具体 需求 选用 不 同 的 选项 。 

加 ”颜色 模式 : 该 选项 用 于 设 定 图 像 的 色彩 模式 , 下 拉 列 表 中 包括 “位 图 "“ 灰 度 ”“RGB 颜色 "”“CMYK 
颜色 ”和 “Lab 颜色 ” 5 种 可 选 模式 , 不 同 的 颜色 模式 决定 文档 的 用 途 。 用 户 还 可 以 从 "颜色 模式 ” 
右 侧 的 下 拉 列 表 中 选择 色彩 模式 的 位 数 ， 分别 有“1 位 ”“8 位 ”“16 位 ”和 “32 位 ”4 个 选项 。 
通常 位 数 设 置 得 越 高 ， 图 像 的 显示 品质 会 越 高 ， 但 对 系统 的 要 求 相应 也 会 越 高 。 

日 ”背景 内 容 : 站 定 新 文档 的 背景 颜色 ， 如 “ ”“ 背 景色 ”和 “透明 ”。。 若 要 自 定义 新 文档 
的 背景 色 ， 可 在 执行 “新 建 ”命令 前 设置 好 工具 箱 中 的 “背景 色 ”， 然 后 执行 “文件 ” >“ 新建” 
命令 ,在 “背景 内 容 ” 下 拉 列 表 中 选择 “背景 色 ” 即 可 。 

回 图像 大 小 : 主要 用 来 显示 新 建文 档 的 大 小 。 

加 ”颜色 配置 文件 : 用 于 设 定 当前 图 像 文件 要 使 用 的 色彩 配置 文件 。 

加 ”像素 长 宽 比 : 该 选项 只 有 在 图 像 输 出 到 电视 屏幕 时 才 有 用 。 计 算 机 显示 器 显示 的 图 像 是 由 方形 
像素 组 成 的 。 只 有 用 于 视频 的 图 像 ， 才 会 选择 此 选项 。 


知识 储备 : 如 何 新 建文 档 的 分 类 预 设 ? | 
答 : 丰富 的 文档 预 设 分 类 清晰 ， 视 觉 化 展示 ， 具 体 包括 照片 、 打 印 、 图 稿 和 插图 、Web、 移 | 
， 动 设备 胶片 和 视频 等 多 种 文档 类 型 。 如 果 觉 得 预 设 还 不 够 的 话 ,可 以 随时 保存 自己 的 文档 预 设 ， ， 
”比如 保存 一 个 “设计 文档 T” 的 预 设 ， 这 样 就 可 以 在 “已 保存 ”中 直接 打开 ， 非 党 方便。 具体 参 | 
| 数 的 设置 跟前 面 的 版 本 一 样 ， 但 是 看 起 来 更 方便 、 更 形象 。 | 


图 2-7 


在 使 用 Photoshop 编辑 一 张 图 像 前 ， 先 要 将 其 打开 。 打 开 的 方式 很 多 ， 下 面 就 向 大 家 介绍 几 种 
常用 的 打开 方式 。 


一 -一 < Pop thf 
1. 使 用 “打开 ”命令 》 


执行 “文件 ” >“ 打开 ”命令 ， 或 者 按 快捷 键 Clt+O， 弹 出 “打开 ”对 话 框 ， 如 图 2-8 所 示 。 


如 果 需 要 同时 打开 多 个 文件 ， 可 按 下 Ctrl 键 单 击 所 需要 打开 的 文件 ， 然 后 单 击 “ 打 开 ” 按 钮 ， 即 可 
打开 所 选 图 像 文 件 ， 如 图 2-9 所 示 。 


2. 使 用 “打开 为 ”命令 
执行 “文件 ” >“ 打开 为 ”命令 ， 或 者 按 快捷 键 Ctl+ShiftkAltrO， 弹 出 “打开 ”对 话 框 。 选 择 


需要 打开 的 文件 ， 并 在 “打开 ”列表 中 为 其 指定 正确 的 格式 ， 然 后 单 击 “打开 ”按钮 ， 打 开 图 像 文件 ， 
如 图 2-10 所 示 。 如 果 没有 选择 正确 的 格式 , 单 击 "打开 ”按钮 后 , 将 会 弹出 警告 框 , 如 图 2-11 所 示 。 


3. 使 用 “在 Bridge 中 浏览 ”命令 。 


执行 “文件 ” >“ 在 Bridge 中 浏览 ”命令 ， 或 者 按 快捷 键 Ctl+Alt+O， 即 可 运行 Adobe Bridge， 
选择 需要 打开 的 图 像 文 件 并 双击 ， 即 可 在 Photoshop 中 打开 所 选 图 像 ， 如 图 2-12 所 示 。 
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4. 使 用 快捷 方式 打开 文件 


将 需要 打开 的 图 像 文 件 的 图 标 拖 动 到 Photoshop 应 用 程序 图 标 上 ， 可 以 在 运行 Photoshop 的 同 
时 打开 图 像 文件 ， 如 图 2-13 所 示 。 如 果 已 运行 Photoshop， 可 直接 将 图 像 拖 入 软件 界面 中 打开 ， 妇 
图 2-14 所 示 。 


图 2-14 


执行 “文件 ” >“ 最近 打开 文件 ”命令 ， 该 子 菜单 中 保存 了 Photoshop 最 近 打开 的 19 个 文件 ， 
如 图 2-16 所 示 。 


2-15 所 示 。 选 中 想 要 打开 的 文件 ， 即 可 打开 所 选 图 像 文 件 ， 如 图 


6. 作为 智能 对 象 打开 


执行 “文件 ”> “打开 为 智能 图 像 ”命令 ， 弹 出 “打开 ”对 话 框 。 选 中 需要 打开 的 文件 ， 然 后 单 
击 “ 打 开 ” 按 钮 ， 即 可 打开 该 文件 ， 该 文件 同时 被 转换 为 智能 对 象 ， 如 图 2-17 所 示 。 


智能 对 象 是 包含 栅 格 或 矢量 图 像 中 
能 够 对 图 层 执行 非 破坏 性 编辑 。 


的 图 像 数据 的 图 层 。 智 能 对 象 将 保留 图 像 的 源 内 容 及 其 所 有 原始 特性 ， 从 而 
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RS 
人 文件。 全 


作品 制作 完成 后 就 需要 及 时 对 其 进行 保存 ， 以 免 系统 故障 或 突然 断 电 造成 数据 丢失 和 损失 等 意 
外 情况 ， 下 面向 大 家 介绍 一 下 关于 保存 文件 的 知识 。 


1. 使 用 “存储 ”命令 


如 果 要 保存 正在 编辑 的 文件 ， 可 执行 “文件 ”>“ 存 储 命令， 或 者 按 快 捷 键 Ctt+S， 图 像 会 按 
照 原 有 的 格式 存储 ， 如 果 是 新 建 的 文件 ， 则 会 自动 弹出 “存储 为 ”对 话 框 ， 如 图 2-18 所 示 。 
3(O onw pa : 


关闭 全 部 Alt+Ctri+W 
关闭 并 转 到 Bridge.… Shift+Ctr+W 


| Shift+Ctrl+S 
恢复 (V) Fl2 


导出 (E) . 
生成 , 
在 Behance 上 共享 (D)... 


2. 使 用 “存储 为 ”命令 


如 果 要 将 文件 重新 保存 为 新 的 名 称 、 其 他 格式 ， 或 修改 其 存储 位 置 ， 可 执行 “文件 ” >“ 存储 为 " 
命令 ， 或 者 按 快捷 键 Ctri+ShifttrS， 弹 出 “另存 为 ”对 话 杠 ， 如 图 2-19 所 示 。 


关闭 (O Ctrl+W 有 
关闭 全 部 Ak+Ctrl+W 
关闭 并 转 到 Bridge… Shift+ Ctrl+W 
存储 (S) Ctrl+S 
存储 为 (A).-. Shift+Ctrl+S 
恢复 (Vv) 


导出 (日 
生成 
在 Behance 上 共享 (D)… 


图 2-19 


实例 2 一 一 制作 简单 的 网 页 图 标 © 


针对 不 同 的 操作 要 求 ， 对 图 
像 文件 的 存储 方式 也 各 有 不 同 ， 
下 面 通过 一 个 简单 按钮 的 制作 来 
了 解 一 下 如 何 存储 文件 。 

到 执行 “文件” >“ 新建" 
命令 ， 新 建 一 个 空白 文档 ， 如 图 2-20 所 示 。 按 
下 Shit 键 ， 使 用 “椭圆 工具 ”在 画布 中 创建 一 个 
#d86674 的 正 圆 ， 如 图 2-21 所 示 。 


上 源 文件 ， 源 文件 第 2 章 \ 简 单 的 网 页 图 标 .psd 


* 操 作 视频 : 视频 第 2 章 制 作 简单 的 网 页 图 标 .mp4 
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图 2-20 图 2-21 


到 双击 该 图 层 缩 览 图 ， 打 开 “ 图 层 样式 ”对 话 框 ， 选 择 “ 渐 变 琶 加 ”选项 ， 设 置 参 数值 如 医 
2-22 所 示 。 新 建 图 层 ， 使 用 “矩形 选 框 工 具 ” 在 画布 中 创建 选区 ， 并 填充 黑色 ， 如 图 2-23 所 示 。 


图 2-22 | 图 2-23 


天 取消 选区 , 执行 "编辑 " >" 变换" > "旋转 " 命令 , 将 其 旋转 并 适当 调整 位 置 , 如 图 2-24 所 示 。 
使 用 相同 的 方法 完成 相似 内 容 操 作 ， 如 图 2-25 所 示 。 


、 


图 2-24 图 2-25 


到 打开 “图 层 样式 ”对 话 框 ， 选 择 “ 内 阴影 ”选项 ， 设 置 各 项 参数 如 图 2-26 所 示 。 继 续 选 
择 对 话 框 中 的 “颜色 友 加 ”选项 ， 设 置 各 项 参数 如 图 2-27 所 示 。 


三 继续 在 对 话 框 中 选择 “投影 " 
定 ”按钮 ， 得 到 的 图 像 效 果 如 图 2- 


在 


文件 进 行 修改 


29 所 示 。 


第 2 章 Photoshop 基本 操作 


选项 ， 设 置 各 项 参数 如 图 2-28 所 示 。 


网 中 我 们 将 完成 的 设计 文档 进行 了 两 种 格式 的 存储 。PSD 格式 作为 预备 文件 ， 
而 存储 为 Web 所 用 格式 是 为 了 对 图 像 进 行 优化 ， 便 于 以 最 好 的 质量 和 最 小 的 体积 上 传 至 网 页 


设置 完成 后 ， 间 


可 在 发 现 有 什么 


单 击 “ 确 


不 足 时 殉 


硒 隐藏 相关 背景 图 层 , 执行 “ 


到 像 ”> 


件 ” >“ 导 出 ”>“ 存 储 为 Web 所 
2-31 所 示 ， 将 图 像 存储 为 透 底 图 像 。 


基于 
〇 透明 像素 (A) 
左上 角 像 
右 下 角 像 素颜 色 (M 


裁 切 
硕 (D) 左 ( 
底 (B) 回 右 R) 


" 裁 切 ”命令 , 裁 切 透明 像素 , 如 


当知 识 储备 : 如 何 创建 不 规则 选区 ? 


: 利用 “矩形 选 框 工具 ”可 以 创建 和 矩 形 选 框 区 ， 但 无 法 创建 不 规则 选区 。 若 要 创建 不 规 骨 
es 需要 使 用 “钢笔 工具 ”绘制 路 径 ， 然 后 转换 选 


格式 (旧版)” 


命令 ， 在 弹出 的 对 话 框 中 对 图 像 进 行 优化 ， 如 区 


图 2-30 所 示 。 执行 " 文 


区 六 克 让 修改 图 像 大 小 © 


张 区 


像 大 小 的 操作 进行 讲解 。 


© 


像 应 用 在 不 同 的 领域 时 需要 不 同 
在 Photoshop 中 ， 修 改 图 像 的 大 小 时 要 注意 其 像素 大 小 、 
改 医 


的 尺寸 ， 所 以 需要 调整 


辐 像 ”> “图 像 大 小 ”命令 ， 或 者 按 快捷 键 Ctrl+Alt+1， 弹 出 “ 


执行 “ 
| 2--32 所 示 。 
图 像 预览 : 可 以 通过 图 像 预览 窗 


加 ”尺寸 : 可 以 更 改 像素 尺寸 的 度 


© 


调整 为 可 以 选取 预 设 以 调整 攻 


观察 修改 后 的 图 像 效果 。 


像 的 大 小 来 适应 不 后 
文档 大 小 以 及 分 辩 率 的 设置 。 下 了 


的 需要 。 
面 针 对 修 


司 像 大 小 ”对 话 框 ， 如 


单位 ， 单 击 “ 尺 寸 ”旁边 的 下 拉 按钮 并 从 菜单 中 选取 度量 单位 。 
像 大 小 ,也 可 以 选取 "自动 分 辩 率 "为 特定 打印 输出 调整 图 像 大 小 。 
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宽度 /高 度 : 可 以 输入 "宽度" 和 “高度 " 的 值 。 要 以 其 他 度量 单位 输入 值 , 可 以 从 "宽度 " 和 "高 
度 ” 文 本 框 旁边 的 菜单 中 选取 度量 单位 。 

分 辩 率 : 可 以 更 改 “分辩 军 ”的 值 ， 也 可 以 选取 其 他 度量 单位 。 

重新 采样 根据 文档 类 型 以 及 是 放大 还 是 缩小 文档 来 选取 重新 采样 方法 。 子 菜单 中 包括 多 种 选项 ， 
默认 为 自动 。 


OO 


图 2-32 


修改 画布 大 小 
绘制 或 编辑 图 像 时 ， 可 能 会 出 现 画 布 尺寸 不 够 的 情况 ， 可 以 


通过 执行 “画布 大 小 ”命令 对 画布 的 尺寸 进行 重新 设置 。 

执行 “图 像 ” >“ 画 布 大 小 ”命令 ， 或 者 按 快捷 键 
Ctn+Alt+C， 弹 出 “画布 大 小 ”对 话 框 ， 如 图 2-33 所 示 。 在 “新 
建 大 小 "选项 区 中 先 确定 相应 的 单位 一 一 "百分比 "“ 像 素 "或 “英寸” 
等 。 然 后 指定 新 的 画布 尺寸 , 单 击 “确定 "按钮 即 可 改变 画布 的 大 小 。 
当前 大 小 : 用 来 显示 当前 图 像 和 文档 的 大 小 。 

新 建 大 小 : 在 此 输入 数值 修改 画布 大 小 。 

定位 : 用 来 设置 图 像 在 画布 中 的 扩展 方向 。 

相对 : 勾 选 该 选项 后 , 输入 的 数值 代表 画布 缩放 区 域 的 大 小 。 图 2.33 
正 值 使 画布 增 大 ， 负 值 使 画布 减 小 。 

画布 扩展 颜色 : 用 来 设置 新 画布 的 填充 颜色 。 当 图 像 的 背景 颜色 为 透明 颜色 时 ， 该 选项 不 可 用 。 


实例 3 一 制作 艺术 小 网 页 全 


在 网 页 设计 过 程 中 ， 经 常 “ 国 wa 
会 遇 到 图 片 素材 太 小 或 者 画布 “2 
的 高 度 尺寸 不 足 的 情况 。 这 时 


© ooo 


* 源 文件 ， 源 文件 \ 第 2 章 \ 艺 术 小 网 页 .psd 
上 操作 视频 : 视频 \ 第 2 章 \ 制 作 艺术 小 网 页 .mp4 


可 以 通过 修改 图 像 和 画布 大 小 罗 宝 汐 计 证 @ 二 
获得 更 为 满意 的 图 像 尺 寸 。 接 WERE /AG | 
下 来 通过 制作 一 个 网 页 来 学 习 如 何 调整 图 像 画 00D: 


布 的 尺寸 。 OUR MOMS. 
到 执行 “文件” > “打开 ”命令 , 扩 | 四 
开 素 材 文件 “素材 \ 第 2 章 \001jpg”， 如 区 
2-34 所 示 。 执行 “图 像 ”> “图 像 大 小 ”命令 ， 
设置 参数 如 图 2-35 所 示 ， 改 变 图 像 大 小 。 


和 Sa 


雪 钥 


图 2-34 


一 设置 完成 后 单 击 “确定 " 按钮 , 执行 “ 


志 丛 站 


对 画布 进行 扩 


展 。 设 置 完成 


后 单间 


上 “确定 "按钮 ,可 


辐 像 ”> “画布 大 小 ”命令 ， 设 置 参数 如 图 2-36 所 示 ， 


@ 


OUR MOMS. 


义 看 到 图 像 下 方 多 出 一 块 黑 色 区 域 , 如 图 2-37 所 示 。 


砚 打开 "字符 " 


似 文字 内 容 的 制作 ， 如 


图 2-39 所 示 。 


@ 


当知 识 储备 : 如 何 更 改 字体 样式 ? 
答 : 我 们 可 能 在 输入 文字 后 对 当前 字体 样式 感到 不 满意 ， 可 以 先 单 击 选项 栏 中 的 “提交 所 有 ， 


当前 编辑 ”按钮 ， 然 后 重新 选择 字体 。 


WE'RE 


GOOD. 
JUST ASK 
OUR MOMS. 


板 ， 设置 各 项 参数 如 图 2-38 所 示 ， 输 入 文本 内 容 。 使 用 相同 方法 完成 相 


裁剪 图 像 5 


裁剪 固定 尺寸 


到 像 在 构图 上 存在 问题 或 者 制作 时 只 需要 图 像 中 的 某 一 部 分 ， 这 时 就 可 以 通过 裁剪 
像 构图 的 调整 或 截取 局 部 图 像 的 操作 。 


在 处 理 图 像 时 , 如 


果 需 要 将 一 张 图 像 裁剪 成 固定 大 小 , 可 以 通过 下 面 的 操作 完成 。 打 开 一 张 医 


选择 “裁剪 工具 ”， 在 其 选项 栏 的 “设置 长 宽 比 ” 框 
然后 在 图 像 上 拖 动 选择 需要 的 区 域 ， 间 


像 实现 对 


EE 击 “提交 ”按钮 即 可 ， 如 


2-41 所 示 。 


输入 想 要 裁剪 的 图 像 宽 高 ， 如 图 2-40 所 示 。 
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图 2-41 


在 Photoshop 中 也 可 以 对 图 像 的 透视 效果 进行 微调 。 打 开 一 张 图 片 ， 选 择 “ 透 视 裁剪 工具 ” 
在 图 片上 绘制 裁剪 区 域 ， 拖 动 调整 裁剪 框 的 透视 角度 与 被 裁剪 的 透视 角度 一 致 后 ， 单 击 “ 提 交 ” 接 
钮 或 在 裁剪 框 中 双击 鼠标 左 键 ， 即 可 完成 透视 裁剪 操作 ， 如 图 2-42 所 示 。 


获得 好 的 构 
有 些 图 片 可 能 在 构图 方面 存在 不 足 ， 可 以 通过 裁剪 将 其 完善 。 选择 “裁剪 工具 ”, 在 选项 栏 的 “ 视 


图 ”下 拉 列 表 中 选择 裁剪 辅助 线 ， 利 用 这 些 辅助 线 可 以 裁剪 获得 好 的 构图 ， 如 图 2-43 所 示 。 
图 2-43 
© 2 三 分 法 构图 的 主要 目的 就 是 避免 对 称 式 构 图 。 图 上 任意 两 条 线 的 交点 就 是 放置 主题 的 
合适 位 置 。 
© 网 格 : 裁剪 网 格 可 帮助 用 户 对 齐 图 片 。 选 择 了 小 方 格 的 对 齐 方式 后 ， 随 便 旋 转 、 摇 描 任 意 一 个 
角 来 手动 对 齐 图 片 ， 裁 前 网 格 主要 是 用 来 对 齐 地 平 线 倾斜 的 照片 。 
@@ ”三 角形 : 以 三 个 点 为 景物 的 主要 位 置 ， 形 成 一 个 三 角形 ， 其 构图 方式 的 特点 是 安定 、 均 衡 又 不 
失灵 活 。 这 种 三 角形 有 正三 角 、 斜 三 角 和 倒 三 角 。 
加 ”黄金 比例 : 黄金 分 割 法 是 最 常用 的 构图 法 则 。 使 用 黄金 分 割 法 裁剪 图 像 时 ， 一 定 要 注意 画面 的 


主题 元 素 应 该 放置 在 两 条 线 交点 的 最 近 位 置 。 


[&3 


a 


”对 角 : 利用 裁 切 框 对 图 像 进行 对 角 线 构图 ， 也 属于 黄金 分 割 法 的 一 种 构图 方法 ， 两 条 和 斜 线 的 交 
点 是 放置 主题 的 最 佳 位 置 。 

回 ”金色 螺 线 : 观 者 的 视线 被 安排 在 螺旋 线 周围 的 对 象 引 导 到 螺旋 线 中 心 ， 黄 金 螺 旋 线 绕 的 最 密集 
的 一 端 为 图 片 的 主体 ， 也 是 黄金 螺旋 的 起 点 。 

图 像 的 复制 和 粘贴 p 
通过 对 图 像 进行 复制 和 粘贴 的 操作 ， 可 以 实现 一 幅 图 像 多 幅 小 图 的 效果 。 同 时 选择 不 同 的 粘贴 

命令 可 以 获得 更 加 丰富 的 粘贴 效果 。 

ph 复制 文档 > 
为 了 保护 源 文件 和 方便 比较 图 像 的 变化 ， 经 常 在 一 些 操作 中 需要 复制 一 些 图像 。 在 Photoshop 


中 可 以 轻松 实现 图 
定 ” 按 钮 即 可 复制 


图 


像 复制 的 操作 。 执行 “ 
图 像 ， 如 图 2-44 所 示 。 


图 像 ”> “复制 ”命令 ， 弹 出 “复制 


图 


像 ”对 话 框 。 单 击 “ 确 


图 2-44 


勾 选 “ 仅 复制 合并 的 图 层 ” 选 项 ， 复 制 操作 将 只 复制 合并 图 层 上 的 内 容 ， 未 合并 图 层 上 的 内 容 
不 会 被 复制 。 复 制 的 图 像 将 以 “x x x 副本 ”命名 。 


实例 4 一 一 制作 网 页 背景 ) 


复制 S 像 除 了 可 以 保护 国信 re 
源 文件 和 方便 比较 修改 前 后 图 剖 & 珊 
像 的 变化 ， 还 经 常会 应 用 到 制 ”总 让 国 
作 页 面 背 景 和 细节 部 分 。 
到 执行 "文件 > 
”命令 ， 打 开 素 材 文件 “素材 \ 第 2 章 \002. 
2-45 所 示 。 在 背景 图 层 上 方 新 建 
“钢笔 工具 ”在 画布 中 绘制 路 径 ， 
+Enter 转换 为 选区 后 , 填充 白色 ， 
所 示 。 
三 取消 选区 , 按 快捷 键 Crl+J 复制 区 


云 ， 


* 源 文件 ， 源 文件 \ 第 2 章 \ 网 页 背景 ,psd 
* 操作 视频 : 视频 第 2 章 \ 制 作 网 页 背景 .mp4 


TD 


404FowlNotFound 


iuested has flown the coop. | 


DB、 


适当 缩放 并 调整 其 位 置 ， 如 图 2-47 所 示 。 使 


相同 方法 完成 其 他 内 容 的 制作 ， 得 到 的 医 


像 效 果 如 医 


2-48 所 示 。 
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404 Fowl Not Found 


图 2-45 图 2-46 


NN “ul 


ro NotFound ~ 


图 2-47 图 2-48 
于 将 相关 图 层 进行 编组 ， 为 其 添加 图 层 蒙 版 ， 使 用 黑白 径 向 渐变 填充 画布 ， 如 图 2-49 所 示 。 
将 该 组 重 命名 为 “背景 ”， 并 修改 其 “不 透明 度 ” 为 30%， 得 到 最 终 效果 ， 如 图 2-50 所 示 。 
ACE 


图 2-49 图 2-50 


节 拷贝 和 粘贴 ”@ 


图 像 的 拷贝 、 粘 贴 也 是 一 些 创 作 中 经 常会 遇 到 的 操作 ， 执 行 图 像 的 拷贝 和 粘贴 可 以 将 原 图 像 中 
选区 内 的 图 像 复制 到 创作 的 图 像 中 ， 而 且 不 会 损坏 原始 素材 。 


实例 5 一 制作 网 页 广告 插图 © 


图 像 的 拷贝 、 粘 贴 也 有 其 独特 国 完 
的 作用 ， 也 是 一 项 任何 命令 都 无 法 
代替 的 操作 ， 很 多 的 创作 都 可 以 用 
拷贝 、 粘 贴 来 完成 。 

加 打开 素材 “素材 \ 第 2 
章 \ 004.jpg”， 使 用 “和 矩 形 选 框 工具 ”创建 选区 ， 
如 图 2-51 所 示 。 使 用 快捷 键 Ctrl+C 进行 拷贝 ， 
打开 素材 “素材 \ 第 2 章 \ 003.jpg”， 使 用 快捷 键 
Ctrl+V 进行 粘贴 ， 如 图 2-52 所 示 。 


到 


* 源 文件 : 源 文件 \ 第 2 章 \ 网 页 广告 插图 .psd 
* 操作 视频 : 视频 第 2 章 \ 制 作 网 页 广告 插图 .mp4 


im REKLAMAJUAI 
© pn KETUI 


$s mst 


人 oem MEENA 


x 


DE Ed 二 
图 2-51 图 2-52 


三 使 用 “缩放 工具 ”适当 调整 素材 图 像 的 位 置 和 大 小 ， 如 图 2-53 所 示 。 使 用 相同 方法 完成 
相似 内 容 的 制作 ， 如 图 2-54 所 示 。 


mem nom aa 


| 当知 识 储备 : 如 何 执行 “拷贝 ”命令 ? | 
| ” 答 : 很 多 人 可 能 在 执行 “拷贝 命令 时 , 发 现 该 命令 显示 为 不 可 用 , 所 以 在 执行 "拷贝 "命令 前 ，， 
首先 要 将 拷贝 的 对 象 载 入 选区 内 。 | 


EE 选择 性 粘贴 @ 
Photoshop 文件 中 通常 会 包含 很 多 的 图 层 ， 可 以 通过 “选择 性 粘贴 ”命令 将 拷贝 对 象 粘贴 到 不 
同 的 图 层 中 。 执 行 “编辑 >“ 选 择 性 粘贴 ”命令 ， 可 以 看 到 有 不 同 的 粘贴 命令 。 
@@” 原 位 粘贴 ， 该 命令 主要 是 将 想 要 粘贴 的 对 象 粘贴 到 拷贝 对 象 的 原始 位 置 。 
@@” 贴 入 : 执行 该 命令 前 图 像 中 要 先 创建 一 个 选区 ， 想 要 粘贴 的 对 象 将 会 粘贴 到 选区 内 。 
@ ”外 部 贴 入 : 执行 该 命令 首先 需要 创建 一 个 选区 ， 想 要 粘贴 的 对 象 将 会 粘贴 到 选区 外 。 
加 ”粘贴 且 不 使 用 任何 格式 : 执行 该 命令 后 ， 想 要 粘贴 的 对 象 不 附带 任何 原 有 的 格式 和 样式 。 


CI 了 ) 

利用 选择 性 粘贴 可 以 进行 什么 样 的 “” 回 
创作 呢 ? 下 面 还 是 通过 一 个 简单 的 实例 ”党 
了 解 一 下 选择 性 粘贴 与 粘贴 的 区 别 ， 同 
时 也 可 以 加 深 对 选择 性 粘贴 的 认识 。 

吏 执行 “文件 > “打开 " 命令 ， 
打开 素材 文件 “素材 \ 第 2 章 \014jpg”， 并 使 用 “矩形 
选 框 工具 ”在 画布 中 创建 选区 ,如 图 2-55 所 示 。 执行 “ 编 
辑 ” >“ 拷贝 ” 命令， 打开 素材 文件 “素材 \ 第 2 章 \013. 
jpg”， 在 画布 中 创建 选区 ， 如 图 2-56 所 示 。 


> 源 文 件 ， 源 文件 \ 第 2 章 \ 茶 叶 广 告 .psd 
操作 视频 ， 视频 第 2 章 \ 制 作 茶 叶 广告 ,mp4 


THE PRINTING AND 


因 区 Photoshop CC 网 站 UI 设计 全 程 揭秘 (第 2 版 ) 和 


PRINTING AND 


图 2-55 图 2-56 


执行 “编辑 " > "选择 性 粘贴 " > " 贴 入 " 命令 , 调整 图 像 大 小 和 效果 , 如 图 2-57 所 示 。 打开 “ 医 
板 ， 可 以 看 到 图 层 自动 按照 选区 范围 添加 了 蒙 版 ， 如 图 2-58 所 示 。 


En 


THE PRINTING AND 


图 2-57 图 2-58 


使 用 相同 方法 完成 相似 内 容 的 制作 ， 图 像 效果 如 图 2-59 所 示 。 打 开 “ 
看 到 图 层 缩 览 图 ， 如 图 2-60 所 示 。 


板 ， 可 以 
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RNgreeniedal 
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图 2-59 图 2-60 
a 知识 储备 : 如 何 用 其 他 方法 插入 图 片 ， 并 使 其 图 像 效 果 和 “图 层 ” 面 板 不 变 ? | 
答 : 直接 将 素材 文件 拖 入 设计 文档 中 ， 然 后 在 拖 入 的 图 像 中 绘制 选区 ， 最 后 为 其 添加 图 层 ， 


制 粘贴 后 的 图 像 通 常 不 能 完全 满足 要 求 ， 可 以 通过 变换 图 像 的 操作 ， 调 整 图 像 的 角度 、 大 小 
和 透视 等 内 容 ， 实 现 更 丰富 的 图 像 效果 。 


F 
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二 移动 图 像 © 


复制 图 像 的 位 置 如 果 没 有 达到 预期 的 目的 ， 可 以 使 用 “移动 工具 ”轻松 地 将 图 像 移动 到 合适 的 
位 置 ， 如 图 2-61 所 示 。 使 用 “移动 工具 ”不 仅 可 以 对 图 层 内 的 图 像 进行 移动 ， 也 可 以 对 选区 内 的 图 
像 进行 移动 ， 如 图 2-62 所 示 。 


图 2-61 图 2-62 
移动 图 层 内 的 图 像 : 当 一 个 图 像 中 包含 多 个 图 层 时 ， 我 们 一 定 要 先 选中 想 要 移动 的 图 层 ， 然 后 


© 


选择 “移动 工具 ”， 就 可 以 轻松 地 对 图 层 内 的 图 像 进行 移动 操作 。 
移动 选区 内 的 图 像 : 很 多 时 候 可 能 只 需要 一 个 图 像 内 的 一 部 分 图 案 ， 这 时 候 就 要 先 使 用 选区 工 
具 框 选 想 要 移动 的 部 分 ， 然 后 使 用 “移动 工具 ” 拖 动 选区 部 分 。 


2 缩放 图 像 。 @ 


当 经 过 复制 的 图 像 大 小 不 合理 时 , 就 要 调整 其 大 小 了 。 先 选 定 需要 变换 的 对 象 , 执行 “编辑 " > " 变 
换 ”> “缩放 ”命令 ， 拖 动 变换 框 的 四 个 拐角 便 可 对 其 进行 缩放 ， 如 图 2-63 所 示 。 


时 :A\ A 一 汪 yh 
图 2-63 

@ ”等 比例 缩放 : 拖 动 变换 框 的 四 个 拐角 的 同时 按 下 Shift 键 ， 或 者 单 击 选项 栏 中 的 “保持 长 宽 比 ” 

按钮 ， 即 可 对 图 像 进行 等 比例 缩放 。 

@ ”从 中 心 等 比例 缩放 : 拖 动 变换 框 的 四 个 拐角 的 同时 按 下 Shift 和 Al 键 , 可 保持 图 像 的 中 心 点 不 变 ， 

图 像 等 比例 进行 缩放 。 


4 旋转 图 像 。 @ 

旋转 图 像 主要 用 来 调整 图 像 倾斜 的 角度 。 执 行 “ 编 辑 ”> “变换 ”> “旋转 ”命令 ， 然 后 把 鼠标 
放 在 变换 框 的 四 个 拐角 处 ， 当 鼠标 的 形状 变 成 一 个 弯 箭 头 时 ， 便 可 以 拖 动 鼠标 变换 图 像 的 倾斜 角度 ， 
也 可 以 直接 在 选项 栏 的 “旋转 角度 ”文本 框 中 输入 数值 ， 如 图 2-64 所 示 。 


国 Photoshop CC 网 站 UI 设计 全 程 揭秘 (第 2 版 ) 


Weres Ni Were sc 


自由 变换 。 @ 

执行 “编辑 ”>“ 自 由 变换 ”命令 或 者 按 快捷 键 Cul+T， 使 用 鼠标 右键 在 变换 框 内 单 击 一 下 ， 
在 弹出 的 下 拉 菜 单 中 提供 了 更 多 的 变换 选项 。 
实例 7 一 制作 网 页 广告 


图 像 的 变换 是 Photoshop 
中 一 项 重要 的 操作 ， 利 用 这 项 
操作 可 ee 


* 源 文件 ， 源 文件 \ 第 2 章 \ 网 页 广告 .psd 
* 操作 视 频 : 视频 第 2 章 \ 制 作 网 页 广告 .mp4 


确 。 下 面 使 用 “自由 变换 " 

令 制作 一 个 简单 的 实例 ， 熟 秋 2 

其 操作 的 方法 。 rr 
人 


执行“ 文件” >“ 打开” 命令， 打开 素材 文件 “素材 \ 第 2 章 \019jpg”， 如 图 2-65 所 示 。 
选择 “ 圆 角 矩形 工具 ”， 在 画布 中 创建 任意 颜色 的 形状 ， 如 图 2-66 所 示 。 


ET Exsohb 
Ee = re 
SB cn 
i 
EE 一 
图 2-65 图 2-66 


码 打开 另 一 个 素材 文件 “素材 \ 第 2 章 \019jpg”， 并 将 其 拖 入 设计 文档 中 ， 如 图 2-67 所 示 。 
执行 “编辑 ”> “自由 变换 ”命令 ， 按 下 Shift 键 的 同时 拖 动 变换 框 ， 等 比例 缩放 图 像 ， 按 下 Enter 键 
确定 变换 ， 如 图 2-68 所 示 。 

三 使 用 鼠标 右 击 该 图 层 缩 览 图 ， 在 弹出 的 快捷 菜单 中 选择 “创建 剪贴 蒙 版 ”命令 ， 如 图 2-69 
所 示 。 设 置 完成 后 得 到 图 像 的 最 终 效果 ， 如 图 2_70 所 示 。 


ED 
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| 和 知识 储备 : 创建 剪贴 蒙 版 有 什么 作用 ? 
， 。 答 : 创建 剪贴 蒙 版 主要 是 为 了 保护 源 图 像 并 使 图 像 的 显示 区 域 符合 下 方 图 层 的 大 小 和 形状 ， 
并 不 会 改变 图 像 的 原 比 例 ， 用 户 可 以 决定 图 像 的 显示 区 域 。 


还 原 与 恢复 操作 5 


在 操作 过 程 中 ， 如 果 遇 到 对 当前 效果 不 满意 的 情况 ， 可 以 通过 恢复 操作 将 操作 取消 ， 再 次 进行 

编辑 ， 主 要 使 用 的 是 还 原 和 恢复 操作 。 

加 后退: 如 果 要 让 图 像 进行 的 操作 后 退 一 步 ， 可 以 执行 “编辑 ”>“ 还 原 ” 命 令 ， 或 者 按 快捷 键 
Ctrl+Z。 如 果 想 要 再 次 后 退 一 步 或 多 步 ， 可 连续 按 快捷 键 Ctd+Alt+Z。 

加 “前进 : 如 果 要 让 图 像 后 退 的 操作 前 进一步 ， 可 以 执行 “编辑 ”> “前 进一步 ”命令 ， 或 者 连续 按 
快捷 键 Ctt+Shift+Z， 便 可 逐渐 恢复 被 撤销 的 操作 。 

加 “恢复 文件 : 如 果 想 要 对 图 像 进行 的 所 有 操作 都 取消 ， 让 图 像 恢复 到 最 初 打开 时 的 状态 ， 执 行 “ 文 
件 ”>“ 恢 复 ” 命 令 ， 即 可 恢复 图 像 。 


网 站 图 标的 设计 准则 2 


好 的 标志 往往 会 体现 


体 风格 相 协 调 。 


网 站 的 信息 和 类 型 ， 是 


加 ”代表 性 : 标志 需要 具有 代表 性 。 设 计时 可 将 人 


后 加 以 卡通 化 和 艺术 化 。 例 如 ， 搜 狐 的 狐狸 标志 、 


义 高 度 抽象 和 简化 的 医 


、 动 物 


站 的 灵魂 。 在 设计 标志 时 ， 要 注意 与 


网 站 的 整 


或 植物 等 具体 形象 作为 设计 的 蓝本 ， 然 


四 


形 来 表现 的 ， 这 种 形式 具有 更 高 的 艺术 格调 。 
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专业 性 : 标志 还 需要 具有 高 度 的 专业 性 ， 可 以 


外 


银行 的 钱币 标志 、 奔 驰 汽车 的 方向 盘 标志 、 铁 路 运输 y 


RR 航 的 凤凰 标志 等 。 


和 标的 内 容 往 往 是 


等 本 专业 具有 代表 性 的 物品 作为 标志 。 例 如 ， 中 
业 的 火车 头 形象 等 。 


| 


网 站 图 标的 设计 流程 5 


一 个 成 功 的 网 站 需要 一 个 夺目 的 标志 。 总 体 来 说 ， 


旭 标 是 依据 企业 的 结构 、 行 业 的 类 别 


经 营 


、 红 号 


Rl 多 人 喜欢 用 网 站 英文 名 的 变形 效果 作为 标志 。 这 种 形式 具有 更 强烈 的 现代 感 和 符号 感 ， 夺 人 眼球 、 易于 记忆 


和 标的 设计 和 制作 流程 分 为 以 下 4 个 步骤 。 


的 理念 、 接 触 的 对 象 和 应 


标准 视觉 符号 。 在 设计 之 


一 份 标志 设计 的 调查 问卷 。 


】 2. 要 素 挖掘 ) 


上， 


首先 要 对 企业 做 全 面 深入 的 了 解 。 


的 环境 而 为 企业 制定 的 


大 


通过 对 调查 结果 的 分 析 ， 从 而 提炼 出 标志 的 结构 类 型 和 色彩 


此 ， 设 计 师 首先 会 要 求 客户 填写 


取向 ， 列 出 标志 所 要 体现 的 风格 和 


特点 , 挖掘 与 标志 相关 的 医 


ti 


形 元 素 , 确定 设计 


| 方向， 并 


在 具体 设计 和 开发 阶段 ， 设 计 师 可 以 充分 利 


想象 ， 用 不 同 


到 标 作品 。 


的 表现 方式 慎重 巧妙 地 构思 


到 


F 有 目的 地 设计 , 而 不 是 对 文字 


形 的 盲目 组 合 。 


阶段 收集 到 的 思路 和 重要 的 素材 ， 充 分 发 挥 


图 


标的 具体 表现 形式 和 


局 部 细节 ， 最 终 


发 出 符合 


求 的 


= 


4. 图 标 修正 


提案 通过 的 标志 往往 比较 粗 陋 ， 可 能 在 细节 上 存在 很 多 的 不 足 和 瑕 症 ， 这 就 要 求 对 细节 进行 更 
多 的 修正 和 完善 ， 使 最 终 的 标志 效果 更 加 规范 ， 并 且 能 够 在 不 同 的 环境 和 场合 下 使 用 。 


3.3 感 规则 选区 创建 标志 只 


Photoshop 为 用 户 提供 了 大 量 用 于 创建 选区 的 工具 ， 可 以 使 用 不 同 的 创建 工具 非常 方便 地 在 图 
像 中 创建 各 种 规则 或 不 规则 的 选区 。 其 中 规则 选区 创建 工具 主要 有 4 种 : “矩形 选 框 工具 ”“ 椭 贺 
选 框 工具 ”“ 单 行 选 框 工具 ”和 “单列 选 框 工具 ”， 本 节 将 为 读者 讲解 它们 的 使 用 方法 。 


< 和 矩形 选 框 工具 


“矩形 选 框 工具 ”是 在 设计 图 标 或 按钮 时 常用 的 工具 ， 选 择 “ 和 矩形 选 框 工 具 ”， 用 户 可 在 选项 
栏 中 对 其 进行 相应 设置 ， 如 图 3-1 所 示 。 


图 3-1 


新 选区 : 在 画布 中 创建 一 个 新 选区 ， 若 再 次 创建 选区 ， 则 会 自动 替换 已 经 存在 的 选区 。 
添加 到 选区 : 可 以 将 创建 的 选区 添加 到 已 经 存在 的 选区 范围 中 。 

从 选区 减 去 : 可 以 从 选区 中 减 去 与 当前 选区 范围 交叉 的 部 分 。 

与 选区 相交 : 创建 新 的 选区 后 ， 只 保留 两 个 选区 交叉 的 部 分 ， 如 图 3-2 所 示 。 


添加 到 选区 从 选区 减 去 与 选区 相交 
图 3-2 


加 羽化 : 该 选项 主要 用 于 为 选区 边缘 添加 虚 化 效果 ， 取 值 范围 为 0 ~ 250 像素 。 羽 化 值 越 大 ， 腊 
腕 效果 越 明 显 ， 羽 化 值 越 小 ， 腊 胱 效果 越 不 明显 。 

加 样式 : 用 户 可 以 使 用 3 种 样式 来 创建 选区 ， 分 别 为 “正常 ”“ 国 定 比例 ”和 “固定 大 小 ”。 

名 ”调整 边缘 : 单 击 该 按钮 ， 可 以 弹出 “调整 边缘 ”对 话 框 ， 对 选区 进行 更 细致 的 优化 。 


< 棚 圆 选 框 工具 © 


在 创建 椭圆 选区 时 ， 选 区 边缘 会 产生 锯齿 ， 尤 其 是 图 像 放 大 后 ， 锯 齿 会 更 加 明显 。 这 是 因为 图 
像 中 最 小 的 元 素 是 像素 ,而 像素 是 正方 形 的 ， 如 图 3-3 所 示 。 用 户 可 以 在 选项 栏 中 勾 选 “消除 锯齿 ” 
选项 ， 对 选区 边缘 进行 平滑 处 理 。 


ooo 


加 区 meemwcmwwereee 


前 面 已 经 对 矩形 选区 的 创建 方式 进行 了 简单 讲解 ， 椭 圆 选 区 的 创建 方法 也 与 之 相似 ， 接 下 来 动 
手 练习 一 下 。 


实例 8 一 一 制作 简单 的 Logo 
本 实例 通过 “椭圆 选 框 工具 ”和 回 此 
填充 颜色 相配 合 来 制作 一 个 简单 鲜艳 
的 网 站 图 标 ， 制 作 步 骤 很 简单 。 


* 源 文件 ， 源 文件 第 3 章 \ 简 单 的 Logo.psd 
* 操作 视频 : 视频 \ 第 3 章 \ 制 作 简单 的 Logo.mp4| 


® 
(a 

@oloruse 
[本 printing your dreams 


凶 ) 执行 "文件 >“ 新建” 命令， 创建 一 个 空白 文档 ， 如 图 3-4 所 示 。 新 建 图 层 ， 使 用 “ 椭 
选 框 工具 ”在 画布 中 拖 动 鼠标 ， 创 建 一 个 椭圆 选区 ， 如 图 3-5 所 示 。 


ED 


图 3-4 | 图 3-5 


双 设置 “前 景色 " 为 #94649, 按 快捷 键 At+Delete 填充 颜色 , 然后 按 快捷 键 Ctri+D 取消 选区 ， 
如 图 3-6 所 示 。 使 用 相同 方法 完成 相似 内 容 操作 ， 如 图 3-7 所 示 。 


图 3-6 图 3-7 

三 使 用 “ 横 排 文 字 工具 ”在 画布 中 输入 相应 的 文字 ， 得 到 最 终 效果 ， 如 图 3-8 所 示 。 隐 藏 “ 背 

景 ”图 层 ， 执 行 “ 图 像 ”> “ 裁 切 ”命令 ， 裁 掉 图 像 周 围 的 透明 像素 。 
观 执 行 “ 文 件 >“ 导 出 ”>“ 存 储 为 Web 所 用 格式 ( 旧版 )” 命 令 ， 弹 出 “存储 为 Web 所 用 
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格式 ”对 话 框 ， 对 图 像 进 行 优化 存储 ， 如 图 3-9 所 示 。 
a 二 See 
ER 
@ ee 
oloruse 
| 
5 


妆 知识 储备 : 创建 选区 后 可 以 调整 选区 大 小 吗 ? 
| 答 : 创建 选区 后 ， 可 通过 “选择 ”>“ 修 改 ” 下 的 “收缩 ”“ 扩 展 ” 命 令 对 选区 调整 大 小 ， 
| 注意 该 菜单 下 的 命令 只 对 选区 起 作用 。 


> 


单行 选 框 工 具 和 单列 选 框 工具 


“单行 选 框 工具 ”和 “单列 选 框 工 具 ” 在 图 像 中 创建 1 像素 宽度 或 高 度 的 选区 ， 常 用 于 制 
作 表 格 和 辅助 线 。 它 们 的 使 用 方法 非常 简单 ， 只 需 选 择 相应 的 工具 在 画布 中 单 击 即 可 ， 下 面 通过 一 
个 简单 的 实例 来 具体 讲解 。 


实例 9 一 制作 简单 的 音乐 图 标 S 


了 解 了 “矩形 选 框 工具 ” “椭圆 选 框 工 具 ”“ 单 
行 选 框 工 具 " 和 “单列 选 框 工具 " 
的 使 用 方法 ， 接 下 来 使 用 它们 完 
成 实例 的 制作 。 


上 源 文件 ， 源 文件 第 3 章 \ 简 单 的 音乐 图 标 .psd 
上 操作 视频 : 视频 第 3 章 \ 制 作 简单 的 音乐 图 标 .mp4 


芭 执行 "文件 > 新建” 命令 ,弹出 “新 
建文 档 ” 对 话 框 ， 设 置 参数 如 图 3-10 所 示 。 进 入 
空白 文档 后 ， 新 建 图 层 ， 使 用 “单行 选 框 工具 ”在 
画布 中 绘制 选区 ， 如 图 3-11 所 示 。 


图 3-10 图 3-11 
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三 在 


制 完成 后 ， 设 置 背景 色 为 白色 ,执行 “编辑 >“ 填 充 ” 


3-13 所 示 。 


大使 


工具 选项 栏 中 选择 “添加 到 选区 ”按钮 ， 继 续 在 画布 中 绘制 选区 ， 如 图 3-12 所 示 。 绘 


命令 ， 弹 出 “填充 ”对 话 框 ， 设 置 参 数 如 图 


图 3-12 
用 “ 圆 角 和 矩形 工具 ”在 画布 中 绘制 一 个 宽 高 为 280 x 280 像素 、 


为 #8fc31f 的 圆 角 和 矩形 ， 如 图 3-14 


p08 


图 3-13 


司 角 为 50 像素 并 且 填 充 


角 和 矩形 调整 到 “图 层 1” 下 方 ， 如 图 3-15 所 示 。 使 用 快捷 键 Ctrl+T 调整 选区 图 层 的 角 


度 ， 并 且 修 改 图 层 的 不 透明 度 为 为 选区 图 层 添加 剪贴 蒙 版 ， 如 图 3-16 所 示 。 


排 文字 工具 ” 
况 日 


图 3-14 图 3-15 


在 画布 中 添加 文字 ， 如 图 3-18 所 示 。 


时 选中 文字 内 容 和 红色 的 圆 角 和 矩 形 ， 使 用 快捷 键 Ctr+T 调整 图 


图 3-19 所 示 。 


图 3-16 


.三 继续 使 用 “ 圆 角 矩形 工具 "在 画布 中 绘制 填充 为 #63648 的 形状 , 如 图 3-17 所 示 。 使 用 " 横 


层 角 度 ， 最 终 图 像 效果 如 


钮 知识 储备 : 创建 选区 时 需要 的 快捷 键 有 哪些 ? 
答 : 按 住 Shift 键 创 建 选区 与 “添加 到 选区 "的 效果 相 


， 效 果 相同 ， 


按 住 Shift+Alt 键 创建 选区 与 “与 选区 相交 ” 


效果 相 


同 。 


同 , 按 住 At 键 创建 选区 与 


3.4 顾 填充 与 描 边 改变 图 标 风 格 


在 Photoshop 中 ,用户 可 以 选择 不 同 的 方式 为 图 像 填充 颜色 ， 例 如 使 用 “填充 ”命令 ， 或 使 用 


[En 


快捷 键 ， 还 可 以 使 用 工具 箱 中 的 各 种 填充 工具 进行 填充 ， 如 “渐变 工具 ”和 “油漆 桶 工具 ”。 描 边 


则 是 指 为 选区 描 出 可 见 的 边缘 ， 接 下 来 就 为 读者 介绍 填充 和 描 边 的 操作 方法 。 
. 油漆 桶 工具 


E> 


“油漆 桶 工具 ”可 以 为 图 像 或 选区 填充 需要 的 颜色 和 图 案 。 用 户 可 以 单 击 “ 油 漆 桶 了 


选项 栏 中 进行 相应 设置 ， 如 图 3-20 所 示 。 


[ 具 ” ,在 


前 景 下 了 100% 差 : 32 回 湖 针 占 回 连 纺 的 


图 3-20 


还 允许 选择 填充 的 图 案 类 型 。 
模式 : 用 于 设置 填充 时 色彩 的 合成 模式 ， 与 图 层 “ 混 合 模式 ”效果 相同 。 
不 透明 度 : 用 于 调整 所 填充 颜色 的 不 透明 度 。 


值 的 范围 是 0 ~ 255。 
消除 锯齿 : 勾 选 该 选项 ， 可 消除 边缘 的 锯齿 ， 使 选择 范围 的 边缘 光滑 。 


填充 : 该 下 拉 列 表 中 包含 两 个 选项 ， 分 别 为 “前 景色 ”和 “图 案 ”。 当 选择 “图 案 ” 


所 有 图 层 


模式 时 ， 


容 差 : 用 于 定义 被 填充 颜色 的 相似 度 ， 图 像 的 每 一 个 像素 必须 达到 该 颜色 的 相似 度 才 会 被 填充 ， 


似 的 像素 。 
所 有 图 层 : 勾 选 该 选项 ， 将 使 用 所 有 可 见 图 层 中 的 数据 选择 颜色 。 
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连续 的 : 勾 选 该 选项 ， 仅 填 充 与 所 单 击 图 像 邻 近 的 像素 ， 未 勾 选 该 选项 ， 则 填充 图 像 中 所 有 相 


使 用 “油漆 桶 工具 ”填充 颜色 之 前 ， 需 要 在 “前 景色 ”中 指定 颜色 。 如 果 图 像 中 不 包含 选区 ， 


那么 将 指定 颜色 填充 到 整个 画布 ， 如 果 图 像 中 包含 选区 ， 那 么 只 将 颜色 应 用 到 选区 。 


实例 10 一 制作 绚丽 彩 块 图 标 S 


下 面 使 用 “油漆 桶 工具 ”来 制作 
一 个 实例 ， 通 过 实例 操作 充分 理解 和 
熟练 使 用 该 工具 。 

0 执行 “文件 >“ 新 建 ” 命 
令 ， 创 建 一 个 空白 文档 ， 如 图 3-21 
所 示 。 新 建 图 层 ， 使 用 “ 圆 角 和 矩形 工具 ”创建 一 个 “ 半 
径 ” 为 25 像素 的 路 径 ， 如 图 3-22 所 示 。 按 快捷 键 
Ctrl+Enter 将 路 径 转 化 为 选区 , 并 使 用 “矩形 选 框 工具 ” 
减 去 顶部 选区 ， 如 图 3-23 所 示 。 


* 源 文件 ， 源 文件 \ 第 3 章 \ 绚 丽 彩 块 图 标 .psd 
* 操作 视频 : 视频 \ 第 3 章 \ 制 作 绚丽 彩 块 图 标 .mp4 


图 3-22 图 3-23 
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有 0B 使 用 “油漆 桶 工具 ”在 选区 内 填充 任意 颜色 ， 如 图 3-24 所 示 。 打 开 “ 图 层 样式 ”对 话 框 ， 
选择 “内 阴影 ” 选项， 设置 参数 值 如 图 3-25 所 示 。 


兰 和 扫 上 (1 


设置 为 默认 值 直立 为 财 认 什 


图 3-24 图 3-25 


个) 继续 选择 对 话 框 中 的 “渐变 又 加 ”选项 , 设置 参数 值 如 图 3-26 所 示 。 设置 完成 后 , 单 击 “ 确 
定 ”按钮 ， 得 到 图 形 效果 ， 如 图 3-27 所 示 。 


图 3-26 图 3-27 


码 使 用 相同 方法 完成 相似 内 容 的 制作 ， 如 图 3-28 所 示 。 打 开 “ 字 符 ” 面 板 ， 设 置 其 参数 值 
如 图 3-29 所 示 。 使 用 “ 横 排 文字 工具 ”在 画布 中 输入 相应 的 文字 ， 如 图 3-30 所 示 。 


图 3-28 到 3-29 图 3-30 


J 开 “ 图 层 样 式 ” 对 话 框 ， 选择“ 渐变 二 加 ”选项 ， 设 置 参 数值 如 图 3-31 所 示 。 继 续 选 


Ms) 
择 对 话 框 中 的 “投影 ”选项 ， 设 置 参 数值 如 图 3-32 所 示 。 使 用 相同 方法 制作 其 他 部 分 ， 如 图 3-33 
所 示 。 


廿 


区 站， 法 区 开关 于 同 站 思 寺 


图 3-31 图 3-32 图 3-33 

J 隐藏 “背景 " 图 层 , 执行 “图像” >“ 裁 切 " 命令 , 裁 掉 图 像 周围 的 透明 像素 , 如 图 3-34 所 示 。 
执行 “文件 ”>“ 导 出 ”>“ 存 储 为 Web 所 用 格式 ( 旧版 )” 命 令 ， 弹 出 “存储 为 Web 所 用 格式 ”对 
话 框 ， 对 图 像 进行 优化 存储 ， 如 图 3-35 所 示 。 


基于 
@ 透明 像素 ( 
左上 角 像 素颜 色 (0) 


右 下 角 像 素颜 色 (M) 


裁 切 
顶 (T) 左 (L) 
底 (B) 右 (R) 


图 3-34 图 3-35 


知识 储备 : “油漆 桶 工具 ”选项 栏 中 的 “模式 ”有 什么 作用 ? | 
和 葵 : 与 图 层 的 “混合 模式 ”用 法 相同 ， 用 来 设置 所 填充 颜色 的 模式 。 将 “模式 " 设置 为 “颜色 ”| 
| 时， 不 会 破坏 图 像 中原 有 的 阴影 和 细节 。 | 


S72 S 


a 


执行 “编辑 >“ 填 充 ” 命 令 , 弹出“ 填充” 对话 框 。 用 户 可 在 “内 容 ” 下 拉 列 表 中 选择 用 于 填 
充 的 方式 ， 如 “图 案 ”“ 前 景色 ”“ 背 景色 ”和 “颜色 ”等 。 

若 要 使 用 "前 景色 " 或“ 背 景色" 进行 填充 , 需要 在 执行 该 命令 前 先 设置 好 “前 景色 ”和 “背景 色 ” 。 
若 选择 “颜色 ”选项 ， 则 可 在 弹出 的 “ 拾 色 器 ”对 话 框 中 自 定义 填充 颜色 ， 如 图 3-36 所 示 。 
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实例 11 一 一 制作 简单 的 立体 图 标 者 ) 


“填充 ”颜色 是 设计 中 最 常 ” 同 | * 源 文件 ， 源 文件 \ 第 3 章 \ 简 单 的 立体 图 标 .psd 
用 到 的 , 是 最 简单 也 是 最 重要 的 。 ” 疫 交 > 操作 视频 : 视频 \ 第 3 章 \ 制 作 简单 的 立体 图 标 .mp4 
接 下 来 通过 一 个 实例 来 讲解 “ 填 
充 ” 命 令 的 使 用 方法 和 技巧 。 


芭 执行 “文件 >“ 新建 ”命令 ,创建 一 个 空白 文档 ， 如 图 3-37 所 示 。 新 建 图 层 ， 使 用 “ 椭 
出 选 框 工具 ”配合 “钢笔 工具 ”绘制 出 选区 ， 如 图 3-38 所 示 。 设置 “前 景色 ”为 #90cdd5, 执行 “ 编 
辑 ”> “填充 ”命令 ， 使 用 前 景色 填充 选区 ， 如 图 3-39 所 示 。 


图 3-37 图 3-38 图 3-39 


到 使 用 相同 方法 完成 相似 内 容 的 制作 ， 如 图 3-40 所 示 。 新 建 图 层 ， 使 用 白色 和 柔 边 画笔 适当 
涂抹 画布 ， 如 图 3-41 所 示 。 使 用 “钢笔 工具 ”创建 路 径 并 转换 为 选区 ， 如 图 3-42 所 示 。 


OOO 


图 3-40 图 3-41 图 3-42 
三 为 该 图 层 添加 图 层 蒙 版 , 修改 “填充 " 为 44%, 并 将 其 移 至 “图 层 1” 上方, 如 图 3-43 所 示 。 
使 用 相同 方法 完成 相似 内 容 的 制作 ， 如 图 3-44 所 示 。 使 用 “钢笔 工具 ”在 画布 中 创建 路 径 ， 并 转换 
为 选区 ， 如 图 3-45 所 示 。 
总 执行 "编辑 " > "填充 " 命令 , 为 选区 填充 白色 , 并 按 快捷 键 Ctr+D 取消 选区 , 如 图 3-46 所 示 。 
打开 “图 层 样式 ”对 话 框 ， 选 择 “ 内 发 光 ” 选 项 ， 设 置 参数 值 如 图 3-47 所 示 。 继 续 选 择 对 话 框 中 的 
“颜色 到 加 ”选项 ， 设 置 参 数值 如 图 3-48 所 示 。 


第 3 章 选区 、 形状 和 网 站 图 标 


图 3-43 图 3-44 


图 3-46 医 到 3-48 
三 设置 完成 后 ， 单 击 “确定 ”按钮 ， 并 在 “图 层 ” 面 板 中 修改 该 图 层 “ 填 充 ” 为 0%， 如 图 
3-49 所 示 。 使 用 相同 方法 完成 相似 内 容 的 制作 , 如 图 3-50 所 示 。 设置 “前 景色 " 为 #027989, 使 用 " 画 
笔 工具 ”在 画布 中 适当 涂抹 ， 如 图 3-51 所 示 。 


WY) A 


图 3-49 图 3-50 3-51 
使 用 相同 方法 完成 相似 内 容 的 制作 , 如 图 3-52 所 示 。 隐藏 “背景 " 图 层 , 执行 "图像" > " 裁 
切 ” 命 令 ， 裁 掉 图 像 周围 的 透明 像素 ， 如 图 3-53 所 示 。 
到 执行 "文件 >“ 导 出” >“ 存储 为 Web 所 用 格式 ( 旧版 ) ”命令 ， 弹 出 “存储 为 Web 所 
格式 ”对 话 框 ， 对 图 像 进行 优化 存储 ， 如 图 3-54 所 示 。 


加 区 memwcmwereeeA 


刍 知识 储备 : “填充 ”对 话 框 中 的 “内 容 识别 ”有 什么 作用 ? | 


| 答 : 通过 该 功能 可 以 快速 清除 图 像 中 不 需要 的 景物 ， 而 且 会 自动 融合 修补 区 域 与 周围 像素 的 ， 


， 光 线 效果 和 纹理 。 


使 用 快捷 键 Ctrl+| 可 将 当前 图 层 下 移 一 层 , 使 用 快捷 键 Cal+Shift+[ 可 将 当前 图 层 直接 移 至 图 层 最 下 方 ( 即 “图 层 ” 
背景 上 方 ). 


执行 “编辑 >“ 描 边 ”命令 ,弹出 “ 描 边 ”对 话 框 。 用 户 可 以 根据 操作 需求 在 此 对 话 框 中 设置 
描 边 的 “颜色 ” “宽度 ”“ 混 合 模式 ”和 “不 透明 度 ”等 参数 。 此 外 还 可 以 设置 描 边 的 位 置 ， 包括 “内 
部 ”“ 居 中 ”和 “ 居 外 ”。 


实例 12 制作 美妙 的 音乐 图 标 S 


相信 大 家 已 经 对 “ 描 边 ”知识 
有 了 一 部 分 的 了 解 ， 下 面 就 来 动手 
操作 一 下 ， 通 过 一 个 实例 来 强化 对 
描 边 知识 的 理解 。 


> 源 文件 ， 源 文件 \ 第 3 章 \ 美 妙 的 音乐 图 标 .psd 
操作 视频 ， 视频 \ 第 3 章 \ 制 作 美妙 的 音乐 图 标 .mp4 


~ 1 


贡 执行 “文件 >“ 新建 ”命令 ， 新 建 一 个 空白 文档 ， 如 图 3-55 所 示 。 使 用 “椭圆 工具 ”， 
设置 “填充 ”为 任意 颜色 ， 创 建 一 个 云朵 的 形状 ， 如 图 3-56 所 示 。 打 开 “ 图 层 样式 ”对 话 框 ， 选 择 
“ 描 边 ” 选项 ， 设 置 参数 值 如 图 3-57 所 示 。 


图 3-55 图 3-56 图 3-57 


吏 ] 继续 选择 对 话 框 中 的 “内 阴影 " 选项， 设置 参数 值 如 图 3-58 所 示 。 继续 选择 对 话 框 中 的 “ 颜 
色 夫 加” 选 项， 设置 参数 值 如 图 3-59 所 示 。 


际 ， 


码 设置 完成 后 单 击 “ 确 定 ” 按钮 ， 得 到 图 形 效果 。 载 入 该 图 层 选 区 ， 新 建 图 层 ， 填 充 白色 ， 
然后 为 其 添加 “内 阴影 ”图 层 样 式 ， 如 图 3-60 所 示 。 


图 3-58 图 3-59 图 3-60 


芭 设置 完成 后 单 击 “ 确 定 ” 按 钮 ， 将 该 图 层 “ 填 充 ” 修 改 为 0%， 如 图 3-61 所 示 。 使 用 相同 
方法 完成 相似 内 容 的 制作 ， 如 图 3-62 所 示 。 打 开 素 材 “ 素 材 \ 第 3 章 \005.png”， 将 其 拖 入 设计 文 
档 中 ， 适 当 调整 位 置 ， 如 图 3-63 所 示 。 


图 3-61 图 3-62 图 3-63 
复制 该 图 层 ， 载 入 图 层 选 [ 并 填充 颜色 #5d6061， 然后 按 快 捷 键 Ctr+D 取消 选区 ， 如 医 
3-64 所 示 。 执 行 “ 滤 镜 ”> “模糊 ”> “高 斯 模糊 ”命令 ， 弹 出 “高 斯 模糊 ”对 话 框 ， 适 当 模糊 音符 ， 
如 图 3-65 所 示 。 
poe 全 让 “ 确 
为 64%， 作 为 音符 的 投影 ， 如 


出 


定 ”按钮 ， 将 该 图 层 移 至 “图 层 10” 的 下 方 ， 并 修改 其 “不 透明 度 ” 
图 3-66 所 示 。 


所 模 时 J 


\ 


图 3-64 图 3-65 图 3-66 

. 码 使 用 相同 方法 完成 相似 内 容 的 制作 , 如 图 3-67 所 示 。 隐藏 “背景 " 图 层 , 执行 “图像 ”" > " 裁 
切 ” 命 令 ， 裁 掉 图 像 周 围 的 透明 像素 ， 如 图 3-68 所 示 。 执 行 “文件 ”> “导出 ”> “存储 为 Web 所 
格式 (旧版 )” 命令 , 弹出 “存储 为 Web 所 用 格式 ”对话 框 , 对 图 像 进 行 优化 存储 , 如 图 3-69 所 示 。 
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和 a 知识 储备 : “ 描 边 ”对 话 框 中 的 “保留 透明 度 ”选项 有 什么 作用 ? 
答 : 勾 选 该 选项 ， 并 所 当前 所 要 描 边 的 图 怕 中 全 有 和 明 区 域 ， 履 么 措 边区 范围 与 明 的 区 域 
| 重合 时 ， 重合 部 分 不 会 被 描 边 。 


使 用 渐变 工具 增加 图 标 质感 ”5 / 


“渐变 工具 ”是 填充 工具 的 一 种 ， 在 图 标 设计 中 应 用 十 分 广泛 。" 渐 变 工具 ”可 以 填充 多 种 颜色 
过 渡 的 混合 色 ， 这 个 混合 色 可 根据 自己 的 需求 来 编辑 ， 以 达到 一 种 理想 的 填充 效果 。 该 工具 不 仅 可 
以 用 来 填充 图 像 和 选区 ， 还 可 以 填充 图 层 蒙 版 。 


渐变 的 类 型 
单 击 工具 箱 中 的 “渐变 工具 ”按钮 ， 在 上 方 的 选项 栏 中 进行 相应 的 设置 。 选 项 栏 中 提供 了 5 种 


不 同 的 渐变 类 型 ， 分 别 为 “线性 渐变 ”“ 径 向 渐变 ”“ 角 度 渐变 ”“ 对 称 渐变 ”和 “ 萎 形 渐变 ”。 
用 户 可 以 根据 不 同 的 设计 风格 选择 不 同 的 源 变 类 型 ， 从 而 实现 各 种 不 同 的 填充 效果 , 如 图 3-70 所 示 。 


线性 渐变 径 向 渐变 角度 渐变 对 称 渐变 莹 形 渐变 


图 3-70 


单 击 工具 箱 中 的 "渐变 工具 "按钮 , 在 选项 栏 中 可 以 编辑 渐变 颜色 、 渐变 类 型 等 。 单 击 渐变 预览 

即 可 在 弹出 的 “渐变 编辑 器 ”对 话 框 中 编辑 渐变 色 ， 如 图 3-71 所 示 。 

渐变 条 上 方 的 色 标 和 下 方 的 色 标 分 别 为 不 透明 度 色 标 和 颜色 色 标 ， 可 以 分 别 单 击 它们 来 控制 渐 

变 条 当前 位 置 的 颜色 与 不 透明 度 ， 如 图 3-72 所 示 。 

加 实 底 : 在 “渐变 类 型 ”下 拉 列 表 中 分 别 有 “ 实 底 ” 与 “ 杂 色 ” 9 选择 “ 实 底 ”选项 后 ， 
下 方 会 显示 渐变 条 ， 左 边 上 下 两 个 色 标 分 别 为 “起 点 透明 色 标 ” 和 “起 点 颜色 色 标 ”。 

© Se a 
值 越 大 ， 颜 色 过 渡 越 粗糙 。 


图 3-71 图 3-72 
名 ”颜色 模型 : “颜色 模型 ”下 拉 列 表 中 共有 3 种 ， 分 别 为 RGB、HSB 和 LAB， 拖 动 下 方 的 滑 块 可 
调整 渐变 颜色 ， 如 图 3-73 所 示 。 


单 击 “ 渐 变 编辑 器 ”对 话 框 中 的 “存储 ”按钮 ， 弹 出 “存储 ”对 话 框 ， 可 以 将 渐变 预 设 列 表 中 的 所 有 渐变 保存 
为 渐变 库 文件 


实例 13 一 一 制作 可 爱 的 小 鸟 图 标 ) 


在 “渐变 编辑 器 ”对 话 框 
0 个 渐变 色 以 后 ， 在 

名 称 ”文本 框 中 输入 渐变 名 称 ， 
单 击 “ 新 建 ”按钮 ， 可 将 设置 
好 的 渐变 色 保 存 到 渐变 预 设 列 
请 


* 源 文件 ， 源 文件 \ 第 3 章 \ 可 爱 的 小 鸟 图 标 .psd 
上 操作 视频 : 视频 \ 第 3 章 \ 制 作 可 爱 的 小 鸟 图 标 .mp4 


里 ， 以 便 下 次 使 用 。 为 了 使 所 学 知识 更 扎实 ， 
完成 下 面 的 实例 。 


加 执行 “文件 >“ 新建 ”命令 ， 新 建 一 个 空白 文档 ， 如 图 3-74 所 示 。 新 建 图 层 ， 使 用 “ 椭 
具 ” 创建 一 个 正 圆 路 径 ， 如 图 3-75 所 示 。 使 用 "钢笔 工具 ”, 设置 “路 径 操作 ”为 “合并 形 
创建 小 鸟 头顶 的 羽毛 ， 如 图 3-76 所 示 。 


央 ] 


起 


固 芽 woww<mswrseseaa 


图 3-74 图 3-76 
码 将 路 径 转 换 为 选区 ， 使 用 “渐变 工具 ”， 打 开 “ 渐 变 编辑 器 ”进行 编辑 ， 如 图 3-77 所 示 。 
设置 完成 后 单 击 “确定 ”按钮 ， 使 用 “渐变 工具 ”为 选区 填充 相应 的 渐变 色 ， 如 图 3-78 所 示 。 打 开 
妈 层 样式 ”对 话 框 ， 选 择 “ 内 阴影 ”选项 ， 设 置 参 数值 如 图 3-79 所 示 。 


图 3-77 图 3-78 


了 设置 完成 后 单 击 “确定 " 按钮， 得 到 图 形 效果 , 如 图 3-80 所 示 。 新 建 图 层 , 使 用 "钢笔 工具 ” 
创建 路 径 并 转换 为 选区 ， 填 充任 意 颜 色 ， 如 图 3-81 所 示 。 


图 3-80 图 3-81 


观 打开 “图 层 样式 ”对 话 杠 ， 选 择 “ 渐 变 释 加 ”选项 ， 设 置 参 数值 如 图 3-82 所 示 。 设 置 完 
成 后 修改 “填充 ”为 0%， 得 到 图 形 效果 ， 如 图 3-83 所 示 。 


大 六 


第 3 章 选区 、 形状 和 网 站 图 标 


转换 为 智能 对 象 ， 然 后 执行 “ 滤 镜 ”> “模糊 ”> “高 斯 模糊 ”命令 ， 对 色 块 进行 模糊 ， 


如 图 3-84 所 示 。 设 置 完成 后 单 击 “确定 ”按钮 ， 得 到 医 


方法 完成 相似 内 容 的 制作 ， 如 图 3-86 所 示 。 


“ee 


3-84 | 图 


吕 合 


“钢笔 工具 ”, 设置 "填充 " 为 任意 颜色 , 创建 出 乌 嘴 部 的 形状 , 如 区 


3-85 


层 样式 ”对 话 框 ， 选 择 “内 阴影 ”选项 ， 设 置 参数 值 如 医 


加 ”选项 ， 设 置 参数 值 如 图 3-89 所 示 。 


形 的 模糊 效果 ， 如 医 


图 3-86 


3-85 所 示 。 使 用 相同 


3-87 所 示 。 打开“ 医 
3-88 所 示 。 继 续 选 择 对 话 框 中 的 “渐变 翅 


图 3-87 


图 3-88 


图 3-89 


得 到 嘴 部 的 立体 效果 ， 如 图 3-91 所 示 。 使 用 相同 方法 完成 嘴 部 其 他 部 


Fp 


加 使 
对 话 框 ， 选 择 


“椭圆 工具 "创建 一 个 任意 颜色 椭 


9 3-90 图 3-91 


选择 对 话 框 中 的 "投影 "选项 , 设置 参数 值 如 图 3-90 所 示 。 设 置 完成 后 单 击 “ 确 定 "按钮 ， 


分 的 制作 ， 如 图 3-92 所 示 。 


图 3-92 


圆 , 作为 乌 的 眼 部 , 如 医 


3-93 所 示 。 打开“ 


“渐变 到 加 ”选项 ， 设 置 参 数值 妇 


3-94 所 示 。 继 续 选 


设置 参数 值 


到 3-95 所 示 。 


泽 对 话 框 中 的 “投影 ” 


层 样式 ” 
选项 ， 


PE 


图 3-93 | 3-94 


观 ) 设置 完成 后 单 击 “ 确 定 ” 按 钮 ， 得 到 图 形 效果 ， 如 图 3-96 所 示 。 使 用 相同 方法 完成 相似 
内 容 的 制作 ， 如 图 3-97 所 示 。 


Tt 


mm™ 


图 3-97 


薄 隐藏 "背景" 图 层 , 执行 “图像” >“ 裁 切 " 命令 , 载 掉 图 像 周 围 的 透明 像素 , 如 图 3-98 所 示 。 
> “导出 ”> “存储 为 Web 所 用 格式 (旧版 )” 命 令 , 对 图 像 进 行 优化 存储 , 如 图 3-99 所 示 。 


当知 识 储备 : 使 用 “渐变 工具 ”与 “渐变 又 加 ”样式 有 什么 区 别 ? 


| 答 : 使 用 "渐变 工具 " 填充 是 对 图 像 像素 的 修改 , 而 “渐变 释 加 ”样式 不 会 直接 修改 图 像 像素 ，| 
并 可 以 隐藏 和 删除 。 | 


使 用 形状 工具 创建 图 标 5 \ 


形状 工具 所 绘制 出 的 矢量 图 形 ， 在 不 同 分 辩 率 的 文件 中 使 用 不 会 受到 限制 ， 不 会 出 现 锯齿 模糊 


PE 


ER me 


现象 ， 即 使 是 在 棱角 处 也 会 清晰 可 见 。 


2 大 于 形状 工具 -(@ 


常用 的 形状 工具 主要 有 “钢笔 工具 ” “矩形 工具 ” “椭圆 工具 ”“ 贺 角 矩 形 工具 ” “多 边 形 工具 ” 
“直线 工具 ”和 “ 自 定义 工具 ”。 它 们 不 仅 能 绘制 形状 图 层 ， 还 可 以 绘制 工作 路 径 和 像素 图 像 。 

例如 ，" 国 角 矩 形 工具 " 可 以 绘制 出 贺 角 矩形 , 单 击 “ 圆 角 箱 形 工具 ”, 可 以 在 选项 栏 中 设置 参数 ， 
然后 在 画布 中 单 击 拖 动 鼠标 创建 加 角 矩 形 ， 如 图 3-100 所 示 。 


图 3-100 
自 工具 模式 : 该 下 拉 列表 中 分 别 有 “ 形 状 ”“ 路 径 ” 和 “像素 ”3 个 选项 。 选 择 “ 形 状 ”后 ， 可 以 
使 用 指定 的 “填充 ”和 “ 描 边 ”将 形状 绘制 在 单独 的 图 层 中 ; 选择 “路 径 ” 后 ， 将 只 绘制 路 径 ; 


选择 “像素 ”后 ， 可 使 用 “前 景色 ”直接 在 当前 图 层 中 绘制 像素 。 
名 填充 / 描 边 : “填充 ” 和 “ 描 边 " 仅 适用 于 “形状 ”模式 , 用 于 指定 新 形状 的 填充 颜色 和 描 边 颜色 。 
名 半径 : 用 来 设置 圆 角 和 矩形 的 圆 角 半径 。 值 越 大 ， 圆 角 武大， 相反 ， 值 越 小 ， 圆 角 越 小 。 


“多 边 形 工具 ”主要 用 于 绘制 多 边 形 和 星 形 。 使 用 “多 边 形 工具 ”， 即 可 在 选项 栏 中 进行 设置 。 
单 击 “多 边 形 工具 ”选项 栏 中 的 钱 按 钮 ， 在 弹出 的 面板 中 勾 选 “ 星 形 ” 选 项 ， 可 以 绘制 出 星 形 ， 如 
图 3-101 所 示 。 


图 3-101 
四 边 : 该 选项 用 来 设置 多 边 形 或 星 形 的 边 数 。 在 选项 栏 中 单 击 “设置 ”按钮 ,打开 “多 边 形 选项 ” 
面板 ， 可 以 对 多 边 形 的 “半径 ”等 属性 进行 设置 。 


实例 14 一 制作 质感 图 标 ) 


使 用 各 种 形状 工具 

绘制 矩形 、 椭 圆 形 、 
边 形 、 直 线 和 自 定 义 形 
状 时 ， 在 单 击 画布 拖 动 
绘制 形状 的 过 程 中 按 住 
空格 键 移动 鼠标 ， 可 以 调整 所 绘制 形状 的 
位 置 。 下 面 通过 一 个 实例 来 掌握 形状 工具 
的 综合 使 用 方法 。 


* 源 文件 ， 源 文件 \ 第 3 章 \ 质 感 图 标 .psd 
* 操作 视频 : 视频 \ 第 3 章 \ 制 作 质感 图 标 .mp4 
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名 执行" 文件" > "新建 "命令 , 新 建 一 个 空白 文档 , 如 
设置 “填充 ”为 #82113d， 创 建 一 个 区 


3-102 所 示 。 使 用 “ 圆 角 矩形 工具 ”， 
角 和 矩形 ， 如 图 3-103 所 示 。 
名 使 用 " 圆 角 矩形 工具 ”， 配 合 “ 减 去 顶层 形状 ”模式 创建 形状 ， 颜 色 为 #6d1234， 如 图 
3-104 所 示 。 


图 3-102 


三 执行 “ 滤 镜 ”> “模糊 ”> “高 斯 模糊 ”命令 ， 弹 出 警告 框 ， 如 图 3-105 所 示 。 单 击 “ 转 换 
为 智能 对 象 ”按钮 ， 继 续 弹出 “高 斯 模糊 ”对 话 框 ， 将 “半径 ”修改 为 10 像素 ， 如 图 3-106 所 示 。 


Adobe Photoshop CC 2018 


py\ 此 形 杖 图 层 必 须 栅 格 化 或 转换 为 智能 对 象 后 才能 继续 。 如 果 构 格 化 ， 它 将 不 再 是 可 编辑 季 线 。 


[转换 为 智 散 对 象 (C) 相 格 化 (R) 


取消 


图 3-105 图 3-106 
名 得 到 图 形 效果 ， 如 图 3-107 所 示 。 执行 “图 


国 层 ”> “创建 剪贴 蒙 版 ”命令 ， 并 修改 医 
合 模式 ”为 “正片 丢 底 ”， 如 图 3-108 所 示 。 此 时 “图 层 ” 面 板 如 图 


妈 3-109 所 示 。 


图 3-107 图 3-108 图 3-109 
天 复制 “ 圆 角 和 矩形 1” 至 图 层 最 


划 技 取 荆 旋 ， 然后 打开 “ 医 
设置 参数 值 如 图 3-110 所 示 。 


层 样式 ”对 话 框 ， 选择“ 渐变 友 加 ”选项 ， 


码 设置 完成 后 单 击 “确定 " 按钮 , 并 修改 图 层 "填充 " 为 0%, 得 到 图 形 效 果 , 如 图 3-111 所 示 。 
使 用 相同 方法 完成 相似 内 容 的 制作 ， 如 图 3-112 所 示 。 


修改 “路 径 


对 话 框 ， 


Fe 
| A 


图 3-110 


“ 椭 国 


使 


选择 “投影 ”选项 ， 设 置 参 数值 如 


具 " 创建 一 个 “填充 ”为 #6d1234 的 正 
操作 ”为 “ 减 去 顶层 形状 ”， 绘 制 


图 3-111 


En 


， 如 图 


出 篮球 的 形状 ， 如 


图 


3-115 所 示 。 


3-113 所 示 。 使 用 "钢笔 工具 ”， 
图 3-114 所 示 。 打 开 “ 图 层 样 式 


yo) 
成 相似 内 
yo9) 


图 3-113 


设置 完成 后 单 击 “ 确 定 ” 按 钮 ， 得 到 


容 的 制作 ， 如 图 


使 用 " 贺 角 矩形 工具 " 创建 一 个 "填充 " 为 #7d7d7d 到 透明 的 圆 角 矩形 。 将 其 
并 执行 “ 滤 镜 ”> “模糊 ”> “高 斯 模糊 ”命令 ， 将 图 


3-117 所 示 。 


图 3-114 


图 形 的 投影 效果 ， 


图 3-115 


如 图 


像 模 糊 5 像素 ， 如 


3-116 所 示 。 使 用 相同 方法 完 


转换 为 智能 对 象 ， 
3-118 所 示 。 


图 3-116 
设置 完成 后 单 击 “ 确 定 ”按钮 ， 得 到 医 


， = 
京 ”图 后 


上 方 ， 修 改 图 层 


内 容 的 制作 ， 如 


所 示 。 按 


“混合 模式 ”为 “正片 翅 底 ”， 轨 


3-121 


所 示 。 


图 层 ， 执 行 


“加 


3-123 所 示 。 


图 3-117 


形 模糊 的 效果 ， 如 图 


图 3-118 


3-119 所 示 。 将 该 区 


层 移 至 “ 背 


像 "> “ 藏 切 "命令 
快捷 键 At+Shift+Ctrl+S， 弹 出 “存储 为 Web 所 
存储 ， 如 


格式 


到 3-120 所 示 。 使 用 相 后 


， 裁 掉 图 像 周 围 


方法 完成 相似 


的 透明 像素 ， 如 


(旧版 )” 对 话 框 ， 对 


3-122 
图 像 进行 优化 
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图 3-119 


| a 知识 储备 : 智能 滤 镜 与 普通 滤 镜 有 什么 区 别 ? 
| 答 : “普通 滤 镜 ”是 通过 编辑 图 像 的 像素 达到 滤 镜 的 特殊 效果 ， 会 直接 修改 图 像 像素 ; 而 “ 智 
| 能 滤 镜 ”是 将 滤 镜 效果 附加 到 智能 对 象 上 ， 因 此 不 会 修改 图 像 的 像素 ， 是 一 种 非 破坏 性 的 操作 。 


形状 的 加 减 
在 画布 中 创建 一 个 路 径 或 形状 后 ， 在 形状 工具 选项 栏 中 ， 打 开 “ 路 径 操作 ”下 拉 列 表 ， 可 选择 


相应 的 选项 。 选 择 不 同 选项 后 ， 所 绘制 的 路 径 或 形状 会 有 不 同 的 效果 ， 如 图 3-124 所 示 。 


| 


合并 形状 减 去 顶层 形状 与 形状 区 域 相交 排除 重 双 形状 
图 3-124 
新 建 图 层 : 所 绘制 的 形状 图 形 将 是 一 个 新 的 图 层 。 
合并 形状 : 在 原 有 的 形状 基础 上 添加 新 的 路 径 形状 ， 与 原 有 的 形状 合并 为 一 个 复合 形状 。 
减 去 顶层 形状 : 在 原 有 的 形状 或 路 径 中 减 去 当前 所 绘制 的 形状 或 路 径 。 
与 形状 区 域 相 交 : 只 保留 原来 的 路 径 或 形状 与 当前 所 绘制 的 路 径 或 形状 的 相交 部 分 。 
排除 重 权 形状 : 只 保留 原来 的 路 径 或 形状 与 当前 所 绘制 的 路 径 或 形状 非 重 又 的 部 分 。 


oocoocoo 


第 3 章 选区 、 形状 和 网 站 图 标 


实例 15 一 制作 时 尚 按钮 图 标 会 


在 该 实例 中 ， 
我 们 将 会 制作 一 
个 包含 很 多 不 规 
则 形状 的 图 标 ， 
制作 过 程 中 将 频 
繁 使 用 到 “路 径 操 作 ” 来 复合 多 
个 形状 。 


* 源 文件 : 源 文件 \ 第 3 章 \ 时 尚 按钮 图 标 .psd 
操作 视频 : 视频 \ 第 3 章 \ 制 作 时 尚 按钮 图 标 .mp4 


吏 执行 "文件 >“ 打开 ”命令 ,打开 素材 图 像 "素材 \ 第 3 章 \007.png”， 作 为 背景 ， 如 图 
3-125 所 示 。 使 用 “椭圆 工具 ”在 画布 中 创建 一 个 “填充 ”为 #ea3634 的 正 圆 ， 如 图 3-126 所 示 。 


图 3-125 图 3-126 


双 打开 “图 层 样式 " 对 话 框 , 选择 " 描 边 " 选项 , 设置 参数 值 如 图 3-127 所 示 。 设 置 完成 后 
定 ” 按 钮 ， 得 到 图 形 描 边 效果 ， 如 图 3-128 所 示 。 


列 


你 
eT 
ET 


图 3-127 图 3-128 
砚 使 用 “椭圆 工具 ”在 画布 中 创建 一 个 “填充 ”为 #cbcbc 的 正 圆 ， 如 图 3-129 所 示 。 继 续 
“椭圆 工具 ”， 修 改 “ 路 径 操 作 ” 为 “ 减 去 项 层 形状 ”， 创 建 一 个 圆 环 ， 如 图 3-130 所 示 。 
到 使 用 "矩形 工具 ”， 修 改 “ 路 径 操作 ”为 “合并 形状 ”， 在 画布 中 创建 一 个 矩形 ， 如 医 
3-131 所 示 。 使 用 “钢笔 工具 ”， 修 改 “ 路 径 操作 ”为 “ 减 去 顶层 形状 ”， 在 画布 中 创建 图 形 ， 鼠 
到 3-132 所 示 。 


使 
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图 3-129 图 3-130 
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图 3-131 图 3-132 


阴 ) 将 该 图 层 栅 格 化 , 打开 “图 层 样式 " 对 话 框 , 选择 “投影 " 选项 , 设置 参数 值 如 图 3-133 所 示 。 
设置 完成 后 单 击 “ 确 定 ”按钮 ， 得 到 图 形 的 投影 效果 ， 如 图 3-134 所 示 。 


9 


图 3-133 图 3-134 


了 使 用 相同 方法 完成 相似 内 容 的 制作 ， 如 图 3-135 所 示 。 新 建 图 层 ， 使 柔 边 画笔 在 画 
布 中 适当 涂抹 ， 制 作出 高 光 效果 ， 如 图 3-136 所 示 。 


图 3-135 图 3-136 


[a 


第 3 章 选区 、 形状 和 网 站 图 标 


. 观 ) 修改 图 层 “ 混 合 模式 ”为 “到 加 ”， 并 为 该 图 层 创建 剪贴 蒙 版 ， 如 图 3-137 所 示 。 使 用 相 


图 3-137 


同方 法 完成 相似 内 容 的 制作 ， 如 图 3-138 所 示 。 


图 3-138 


可 将 图 标的 所 有 图 层 编 组 ， 并 复制 该 组 ， 按 快捷 键 Cul+E 合并 图 层 ， 将 图 标 调整 到 合适 位 置 ， 并 使 用 “橡皮 工 


(ee 适当 涂抹 ， 制 作出 图 标的 倒影 效果 


三 单 击 图 层 下 方 的 “创建 新 的 填充 或 调整 图 层 " 按钮 ， 选 择 菜单 中 的 “ 色 阶 ” 命令 ,在 “属性 ” 


面板 中 适当 调整 参数 ， 如 图 3-139 所 示 。 设 置 完 成 后 得 到 图 形 效 果 ， 如 图 3-140 所 示 。 使 用 相同 


法 完成 相似 内 容 的 制作 ， 如 图 3-141 所 示 。 


图 3-139 


司 


过 


图 3-140 图 3-141 


.到 隐藏 “背景 ”图 层 ， 执 行 “ 
所 示 。 按 快捷 键 At+Shift+Ctr+S， 弹 出 
存储 ， 如 图 3-143 所 示 。 


图 3-142 


8 “存储 为 Web 所 用 格式 ( 旧版 )” 对 话 框 ， 对 


图 3-143 


到 像 ”> “ 裁 切 ”命令 ， 裁 掉 图 像 周 围 的 透明 像素 ， 如 图 3-142 


到 像 进 行 优化 


Ei = 
| 和 9 知识 储备 : 怎么 绘制 正 圆 形 ? 
， 等: 在 绘制 精 贺 时 ， 按 住 Shift 键 的 同时 拖 动 鼠 标 ， 则 可 创建 正 圆 ; 按 住 AttShif 键 ， 则 以 | 
， 单 击 点 为 中 心 创建 正 贺 。 


“ 自 定义 形状 工具 ”提供 了 各 种 不 同类 型 的 形状 ， 方 便 用 户 随时 取 用 。 单 
义 形状 工具 ”， 选 项 栏 如 图 3-144 所 示 。 


具 箱 中 的 “ 自 定 


Err 


图 3-144 
在 选项 栏 中 的 “形状 ”下 拉 列 表 框 中 存储 了 大 量 系统 提供 的 形状 ， 如 图 3-145 所 示 。 用 户 可 根 
据 设 计 需 求 选择 形状 ， 在 画布 中 拖 动 鼠标 即 可 绘制 该 形状 的 图 形 ， 如 图 3-146 所 示 。 


图 3-145 图 3-146 


用 户 还 可 以 将 自己 绘制 的 形状 创建 为 自 定义 形状 。 选 中 自己 绘制 的 形状 ， 执 行 “编辑 ”>“ 自 定义 形状 ” 命令， 
在 弹出 的 对 话 框 中 输入 形状 名 称 ， 单 击 “ 确 定 ” 按钮 即 可 


使 用 Color 设置 图 标 颜 色 


Color 是 一 款 基于 网 络 应 用 的 配色 软件 ， 用 来 增强 
Photoshop 的 色彩 工作 方式 ， 为 用 户 提 供 了 大 量 免 费 的 
色彩 主题 。 用 户 可 以 创建 并 发 布 自己 的 配色 方案 供 别 人 
使 用 ， 当 然 也 可 以 搜索 自己 喜爱 的 配色 方案 。 
执行 “窗口 ”> “扩展 功能 ”> Adobe Color Themes 
命令 ,打开 Color 面板 ， 如 图 3-147 所 示 。 单 击 “ 浏 览 ” 
按钮 ， 下 面 可 显示 当前 上 传 的 和 可 直接 使 用 的 颜色 主题 ， 


用 户 也 可 以 搜索 自己 需要 和 喜欢 的 主题 。 单 击 “ 创 建 ” 
根据 系统 提供 的 配色 规则 自 定义 配色 方案 。 


或 将 自 定义 的 配色 主题 上 传 至 网 络 。 
还 可 以 在 “创建 ”选项 卡 的 “选择 规则 ”下 拉 列 表 中 选择 


用 户 可 以 在 “浏览 ”选项 卡 中 选择 或 搜索 需要 的 配色 主题 ， | 
| 
配色 的 规则 ， 然 后 在 色 盘 中 拖 动 选择 配色 方案 。 | 


[En 


户 可 以 任意 选择 颜色 作为 “前 景色 ”或 “背景 色 ”， 然 后 在 设计 中 使 用 它们 ， 在 “ 色 板 ” 面 
板 的 右上 角 菜 单 中 可 以 重 设 面板 ， 或 删除 不 需要 的 颜色 。 


实例 16 一 制作 简单 钟表 图 标 ) 
下 面 通过 制作 一 个 简 


* 源 文件 : 源 文件 \ 第 3 章 \ 简 单 钟表 图 表 .psd 
操作 视频 : 视频 \ 第 3 章 \ 制 作 简单 钟表 图 标 .mp4 


ey 的 使 方法 ， 感受 


加 执行 "文件 >“ 新建” 命令 ， 创 
建 一 个 空白 文档 ， 如 图 3-148 所 示 。 打 开 
Color 面板 ， 设 置 Create 为 Siders， 设 置 
HEX 为 可 9b384， 如 图 3-149 所 示 。 


图 3-148 图 3-149 

玛 设置 完成 后 ， 单 击 面板 下 方 的 “将 此 主题 添加 到 色 板 ”按钮 ， 然 后 打开 “ 色 板 ” 面 板 ， 发 
现 主题 颜色 已 加 入 色 板 ， 如 图 3-150 所 示 。 执行 “文件 ”>“ 打 开 ” 命 令 ， 打 开 素 材 图 像 “ 素 材 \ 第 
3 章 \008.png”， 将 其 拖 入 设计 文档 中 ， 如 图 3-151 所 示 。 


图 3-150 
天 使 用 "椭圆 工具 ”, 在 画布 中 创建 一 个 “填充 " 为 放 ce2c1 的 正 圆 , 如 图 3-152 所 示 。 打开 “ 医 
层 样式 ”对 话 框 ， 选 择 “ :内 阴影 " 选项 ， 设 置 参 数值 如 图 3-153 所 示 。 
芭 继续 选择 对 话 框 中 的 “投影 ”选项 ， 设 置 参数 值 如 图 3-154 所 示 。 设 置 完成 后 单 击 “ 确 定 ” 
按钮 ， 得 到 图 形 效果 如 图 3-155 所 示 。 


二 
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图 3-154 图 3-155 


使 用 相同 方法 完成 相似 内 容 的 制作 , 如 图 3-156 所 示 。 使 用 “钢笔 工具 ”, 在 画布 中 创建 形状 ， 
颜色 为 #d9b384， 如 图 3-157 所 示 。 


图 3-156 
三) 将 该 图 层 移 至 “椭圆 1" 上方, 得 到 图 形 效果 , 如 图 3-158 所 示 。 使 用 "矩形 工具 ”, 设置 “ 填 


充 ” 为 白色 ， 在 圆 的 左上 方 创建 一 个 矩形 ， 如 图 3-159 所 示 。 


本 所 
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图 3-158 图 3-159 


双 为 该 图 层 创建 剪贴 蒙 版 ， 并 修改 图 层 “ 不 透明 度 ” 为 30% ， 如 图 3-160 所 示 。 使 用 相同 方 
法 完成 相似 内 容 的 制作 ， 如 图 3-161 所 示 。 


图 3-161 


葬 打开 “字符 ”面板 ， 进 行 相应 的 设置 ， 如 图 3-162 所 示 。 使 用 “ 横 排 文字 工具 ”在 画布 中 
输入 相应 的 文字 ， 如 图 3-163 所 示 。 


图 3-162 

王 ) 使 用 相同 方法 完成 相似 内 容 的 制作 ， 
如 图 3-164 所 示 。 

项 隐藏 “背景 " 图 层 , 执行 “图像 " > " 裁 
切 ” 命 令 ， 裁 掉 图 像 周 围 的 透明 像素 ， 如 图 
3-165 所 示 。 按 快捷 键 At+ShiftkCtt+S， 弹 
出 “存储 为 Web 所 用 格式 ”对 话 框 ， 对 图 像 
进行 优化 存储 ， 如 图 3-166 所 示 。 


图 3-166 


第 @ 剖 图 层 与 网 页 中 的 按钮 “2 


网 页 中 的 按钮 主要 用 来 使 用 户 跳 转 到 网 站 中 页 面 ， 或 者 提供 注册 、 下 载 和 购买 等 功能 。 对 
于 一 些 版 式 简 洁 、 内 容 单一 的 页 面 来 说 ， 一 款 安 钮 能 够 使 整个 页 面 的 美观 度 大 幅 提升 ， 从 而 达 
到 吸引 用 户 的 目的 。 


4.1 国 按钮 的 设计 要 点 


按钮 是 网 页 中 非常 重要 的 组 成 部 分 ， 它 既 承 载 着 一 定 的 功能 ， 也 是 主要 的 装饰 性 元 素 。 下 面 是 
按钮 的 设计 要 点 。 
与 页 面 风格 协调 : 页 面 中 的 任何 一 部 分 都 不 能 割 离 出 来 单独 存在 ， 按 钮 也 如 此 。 按 钮 的 风格 必 
须 与 整体 页 面 效 果 保持 一 致 ， 才 能 体现 出 价值 。 
注意 配色 : 设计 按钮 时 要 尽量 做 到 文字 清晰 。 另 外 ， 配 色 应 该 简洁 鲜艳 ， 最 好 不 要 使 用 4 种 以 
上 的 颜色 。 
巧妙 调整 按钮 的 形状 : 按钮 的 形状 应 该 根据 整体 页 面 颜色 的 着 重点 分 布 灵活 调整 。 如 果 需 要 设 
计 很 长 的 按钮 ， 例 如 导航 条 ， 那 么 最 好 制作 得 纤细 一 些 ， 否 则 会 使 版 面 失重 。 


按钮 的 应 用 格式 D 


图 像 格式 即 图 像 文 件 存放 在 磁盘 中 的 格式 ， 比 较 常见 的 有 JPG、PNG、GIF、TIFF 和 PSD 等 格式 ， 
如 图 4-1 所 示 。 
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GIF TIFF PSD 
图 4-1 

使 用 Photoshop 将 按钮 制作 好 之 后 ， 还 要 将 其 存储 为 Web 所 用 格式 的 文件 ， 才 能 应 用 于 网 页 。 
的 Web 所 用 格式 有 JPG、PNG 和 GIF， 下 面 详细 介绍 一 下 。 
1. JPG/JPEG 格式 
JPG 格式 是 最 常见 的 图 像 格 式 ， 它 可 以 在 保证 图 像 显 示 效果 的 情况 下 对 数据 进行 大 幅 压缩 ， 拥 
有 所 有 格式 文件 中 最 高 的 压缩 率 。 

JPG 格式 不 支持 透明 ， 如 果 按 钮 中 不 包含 透明 像素 ， 且 颜色 比较 丰富 ， 那 么 使 用 JPG 格式 存储 
是 非常 不 错 的 选择 。 


© 


© 


© 
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2 PNG 格式 


PNG 格式 支持 256 种 真 彩色 ， 支 持 完全 透明 ， 而 且 压 缩 比率 相对 较 高 ， 因 此 被 广泛 应 用 于 网 络 
传输 。 

如 果 按 钮 中 包含 透明 像素 ， 而 且 有 丰富 的 颜色 过 渡 ， 或 者 明显 的 半 透 明 阴影 和 发 光 等 效果 ， 那 
么 使 用 PNG 格式 存储 比较 合适 。 


a 
bs or x 


GIF 格式 的 压缩 比率 很 高 ， 因 此 文件 体积 较 小 。GIF 只 能 将 其 中 一 种 或 几 种 颜色 设置 为 透明 ， 不 
支持 真 彩色 ,最 大 的 特点 是 可 以 用 来 制作 动态 图 像 。 

如 果 按钮 中 包含 透明 图 像 ， 但 没有 半 透 明 阴影 和 发 光 等 效果 ， 且 使 用 的 颜色 和 线条 极其 简单 
那么 使 用 GIF 格式 存储 可 以 得 到 体积 很 小 的 文件 。 


使 用 图 案 增 加 按钮 的 质感 只 


我 们 经 常 可 以 在 一 些 质感 特别 逼真 的 作品 中 看 到 各 种 纹理 的 影子 ， 比 较 常 见 的 有 条 纹 、 格 子 、 
皮革 和 各 种 污 迹 等 。 合 理 使 用 这 些微 小 的 元 素 ， 可 以 使 作品 更 丰满 、 立 体 、 艺 术 。 下 面 介绍 使 用 
Photoshop 制作 和 定义 图 案 的 方法 。 

回 绘制 图 案 : 执行 “文件” >" 新建" 命令, 新 建 一 张 画 布 (通常 为 透明 背景 )， 然 后 使 用 “矩形 工具 ” 

在 画布 中 绘制 方 格 。 
自 定义 图 案 : 执行 “编辑 ”> “定义 图 案 ” 命 令 ， 弹 出 “图 案 名 称 ” 对 话 框 ， 为 新 图 案 命名 ， 即 可 

将 该 图 案 添加 到 图 案 选 取 器 中 ， 如 图 4-2 所 示 。 


实例 17 一 制作 水 晶 开关 按钮 全 


相信 通过 上 面 的 简单 介绍 ， 大 向 we 
家 已 经 学 会 了 定义 图 案 的 方法 ， 下 

面 通过 一 个 实例 来 具体 介绍 各 种 图 ” 斥 % 加 
案 的 应 用 方法 。 这 款 按 钮 使 用 最 简 “” 轩 器 和 
的 条 纹 图 案 作 为 按钮 的 底 纹 ， 得 

到 的 效果 非常 不 错 。 

到 执行 "文件 ”> “新 建 ”命令 ， 新 建 一 个 空 
白文 档 ， 如 图 4-3 所 示 。 使 用 “椭圆 工具 ”在 画布 中 
创建 一 个 “填充 ”为 #f0000 的 正 圆 ， 如 图 4-4 所 示 。 
新 建 一 张 1x2 像素 的 透明 画布 ， 使 用 “矩形 工具 " 
创建 一 个 黑色 正方 形 ， 如 图 4-5 所 示 。 


上 源 文件 ; 源 文件 \ 第 4 章 \ 水 晶 开 关 按钮 .psd 
* 操作 视频 : 视频 \ 第 4 章 \ 水 晶 开 关 按 钮 .mp4 


hh 
多 
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图 4-3 图 4-4 图 4-5 
加 执行 “编辑 >“ 定 义 图 案 ” 命令， 将 绘制 好 的 图 案 定 义 为 “图 案 1”， 如 图 4-6 所 示 。 返 
可 设计 文档 中 ， 打 开 “ 图 层 样式 ”对 话 框 ， 选 择 “ 和 斜面 和 浮雕 ”选项 ， 设 置 参数 值 如 图 4-7 所 示 。 
继续 在 对 话 框 中 选择 “内 阴影 ”选项 ， 设 置 参数 值 如 图 4-8 所 示 。 


图 4-6 


图 4-7 图 4-8 
有 EB 继续 选择 “渐变 过 加” 选项 ， 设 置 参 数值 如 图 4-9 所 示 。 最 后 选择 “图 案 过 加” 选项， 为 
正 圆 应 用 刚刚 定义 的 图 案 ， 如 图 4-10 所 示 。 设 置 完 成 后 ， 可 以 看 到 按钮 有 了 立体 感 ， 还 添加 了 细密 
的 条 纹 ， 如 图 4-11 所 示 。 


图 49 图 4-10 图 4-11 
按 快捷 键 Ctl+J 复制 该 形状 ， 将 其 调整 到 按钮 下 方 ， 清 除 图 层 样式 并 按 快捷 键 Ctri+T 将 其 
等 比例 放大 ， 如 图 4-12 所 示 。 
更 打开 “图 层 样式 "对话 框 , 选择 "斜面 和 浮雕" 选项 , 设置 参数 值 如 图 4-13 所 示 。 设置 完成 后 ， 
修改 其 “填充 ”为 494e886， 制 作出 按钮 的 外 框 ， 效 果 如 图 4-14 所 示 。 
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图 4-12 图 4-13 图 4-14 


对 于 形状 图 层 来 说 ， 双 击 缩 览 图 部 分 可 打开 拾 色 器 ， 对 其 “填充 ”颜色 进行 修改 ; 双击 缩 览 图 后 面 的 空白 部 分 
可 打开 “图 层 样式 ”对 话 框 


了 在 图 层 最 上 方 新 建 图 层 ， 使 用 “椭圆 选 框 工具 ”创建 一 个 选区 ， 并 使 用 ee 
光 , 如 图 4-15 所 示 。 使 用 相同 的 方法 ， 绘制 出 按钮 上 的 其 他 高 光 效果 ， 如 图 4-16 所 示 。 使 用 " 椭 
到 工具 ”在 按钮 正中 心 创建 一 个 白色 的 正 圆 ， 如 图 4-17 所 示 。 
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图 4-15 图 4-16 图 4-17 


如 果 觉 得 直接 创建 带 有 羽化 效果 的 选区 操作 不 方便 , 可 以 先 创建 不 带 羽 化 的 选区 , 然后 执行 “选择 ">“ 修 改 ">“ 羽 
化 ”命令 对 选区 进行 羽化 即 可 


芭 设置 “路 径 操 作 ”为 “ 减 去 顶层 形状 ”， 继 续 创建 出 圆 环 效果 ， 如 图 4-18 所 示 。 分 别 使 

用 不 同 的 形状 工具 并 配合 “路 径 操作 ”创建 出 开关 图 形 ， 如 图 4-19 所 示 。 打 开 “ 图 层 样式 ”对 话 框 ， 

择 “ 渐 变 赤 加 ”选项 ， 设 置 参 数值 ， 如 图 4-20 所 示 。 

了 继续 选择 “投影 ”选项 ， 设 置 参数 值 如 图 4-21 所 示 。 设 置 完 成 后 单 击 “ 确 定 ” 按 钮 ， 得 

到 图 形 效果 , 如 图 4-22 所 示 。 在 图 层 最 下 方 新 建 图 层 , 使 用 柔 边 画笔 涂抹 出 按钮 的 投影 ， 并 降低 “不 

透明 度 ”， 如 图 4-23 所 示 。 

了 选中 所 有 的 和 层 , 执行 “图 层 ”> “编组” 命令 将 其 编组 , 并 重 命名 为 “ 关 ”, 如 图 4-24 所 示 。 
使 用 相同 的 方法 ， 制 作出 另外 一 个 绿色 的 按钮 ， 所 如 图 4-25 所 示 。 
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图 4-18 图 4-19 图 4-20 
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图 4-24 图 4-25 
型 隐藏 背景 和 其 中 一 个 按钮 ， 执 行 “图 像 ”> “ 裁 切 ”命令 ， 裁 掉 按 钮 周围 的 透明 像素 ， 如 医 
4-26 所 示 。 执 行 “ 文 件 ”>“ 导 出 ”>“ 存 储 为 Web 所 用 格式 ( 旧版 )” 命令 ， 对 图 像 进行 优化 存储 ， 
如 图 4-27 所 示 。 


基于 
避 透明 优 素 (A 


刍 知 识 储备 : 透明 或 不 透明 的 图 像 有 什么 区 别 ? 


区 域 。 例 如 分 别 ， 


| 答 : Photoshop 中 的 图 案 支 持 透明 区 域 ， 并 可 以 在 应 用 该 图 案 时 应 用 该 透明 
| 将 透明 和 黑色 相间 的 图 案 与 黑白 相间 的 图 案 应 用 于 一 块 红色 ， 前 者 得 到 透明 和 黑色 相间 的 条 纹 ， 


| 后 者 得 到 黑白 相间 的 条 纹 。 


图 层 的 基本 操作 2 


于 绘画 用 的 画 纸 。 图 层 的 作用 非常 重要 ，Photoshop 中 的 所 有 操作 和 


Photoshop 中 的 图 层 就 等 同 
编辑 都 是 基于 图 层 而 言 的 。 学 会 灵活 而 合理 地 管理 图 层 不 仅 可 以 降低 操作 的 难度 ， 还 可 以 大 幅 提 高 
工作 效率 。 
i 着 建 图 层 ») 

在 文档 中 新 建 图 层 的 方法 有 很 多 种 , 这 里 只 讲解 其 中 最 常用 的 两 种 。 用 户 可 以 执行 “窗口 ">" 
层 ” 命 令 ， 打开 “图 层 ” 面 板 ， 然 后 单 击 面板 底部 的 “创建 新 图 层 ” 按 钮 新 建 图 层 

此 外 也 可 以 执行 “图 层 ”>“ 新 建 ” >“ 图 层 ” 命 令 ， 或 者 按 快捷 键 Ctr+Shift+N， 在 弹出 的 “新 
建 图 层 ” 对 话 框 中 指定 新 图 层 的 “名 称 ”“ 颜 色 ”“ 模 式 ” 和 “不 透明 度 ” 等 属性 ， 然 后 单 击 “ 确 定 ” 

图 层 ， 如 图 4-28 所 示 。 


按钮 新 建 


图 4-28 


2 复制 图 层 © 


复制 图 层 也 是 极其 常用 的 操作 。 在 Photoshop 中 ， 用 户 既 可 以 将 整个 图 层 在 同一 文档 或 不 同文 
档 间 进行 复制 ， 也 可 以 只 复制 选区 内 的 图 像 。 
nh 
了 1. 复制 整个 图 层 。 

若 要 在 同一 文档 内 复制 图 层 ， 可 先 在 “图 层 ”面板 中 选择 需要 进行 复制 的 一 个 或 多 个 图 层 ， 将 
它们 直接 拖 息 到 面板 下 方 的 “创建 新 图 层 ” 按 钮 即 可 。 

若 要 在 不 同文 档 之 间 复 制图 层 ， 可 先 在 “图 层 ”面板 中 选择 需要 进行 复制 的 一 个 或 多 个 图 层 ， 
然后 执行 “图 层 ”>“ 复 制图 层 ” 命令 ， 在 弹出 的 “复制 图 层 " 对 话 框 中 指定 目标 文档 ， 然 后 单 击 “ 确 
定 ”按钮 ， 如 图 4-29 所 示 。 


用 户 也 可 


以 直接 按 快 


E 键 Ctrl+J 复制 当前 选中 的 图 层 ， 或 者 按 快 捞 


E 键 Ctrl+Shift+N 调 出 “复制 图 层 ” 对 话 框 。 


2. 复制 选区 中 的 图 像 ， 

若 图 像 中 包含 选区 , 那么 直接 按 快捷 键 Ctl+J 可 将 当前 图 层 中 选区 内 的 部 分 复制 到 新 的 图 层 中 。 
若 按 下 Al 键 使 用 “移动 工具 ” 拖 动 选区 ， 则 可 将 选区 中 的 图 像 复 制 到 当前 图 层 。 在 选区 取消 之 
前 ， 用 户 仍 可 以 移动 复制 得 到 的 内 容 ， 而 不 会 影响 到 背景 ， 如 图 4-30 所 示 。 


图 4-30 


| 按 下 Alt 键 , 使 用 “移动 工具 ” 拖 动 是 一 个 万 能 的 复制 方式 , 可 以 用 来 复制 图 层 、 选 区 中 的 图 像 、 路 径 、 图 层 样式 ， 
甚至 蒙 版 


\ / 


入 二 _ 洁 束 图 层 顺 序 > 
Photoshop 通过 将 一 幅 图 像 的 不 同 部 分 分 别 绘制 到 不 同 的 图 层 ， 来 实现 操作 的 可 修改 ， 那 么 这 
些 图 层 是 按照 怎样 的 顺序 组 合成 一 幅 完 整 的 图 像 的 呢 ? 
在 Photoshop 中 ， 当 前 文档 中 所 有 的 图 层 都 被 放置 在 “图 层 ” 面 板 中 ， 位 置 越 靠 下 的 图 层 内 容 
在 图 像 中 显示 越 靠 后 ， 位 置 越 靠 上 的 图 层 内 容 在 图 像 中 显示 越 靠 前 ， 如 图 4-31 所 示 。 


eo 


区 


几 层 中 的 内 容 总 是 按照 上 前 下 后 的 顺序 显示 ， 如 果 调 整 图 层 顺 序 ， 那 么 图 像 的 显示 效果 也 会 随 

之 发 生变 化 。 
若 要 调整 图 层 的 顺序 , 可 选中 相应 的 图 层 , 将 其 直接 拖 卸 到 目标 位 置 , 然后 松 开 鼠 标 。 例 如 , 将 " 医 

层 3” 移 到 “背景 ”图 层 上 方 ， 再 看 看 图 像 效 果 ，“ 图 层 3” 被 “图 层 1” 庶 盖 ， 如 图 4-32 所 示 。 
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图 4-32 


下 移 一 层 ， 使 用 快捷 键 
组 最 下 方 


用 户 可 以 使 用 快捷 键 Cal+] 将 选 定 图 层 上 移 一 层 ， 使 用 快捷 键 Ctrl+[ 将 选 定 


Cul+Shift+] 将 选 定 图 层 移 至 图 层 组 最 上 方 ， 使 用 快捷 键 Ctrl+Shift+[ 将 选 定 图 层 移 至 图 
复制 图 层 和 调整 图 层 顺序 是 制作 按钮 和 图 标 比较 常用 的 操作 。 例 如 在 制作 按钮 的 立体 效果 和 阴 


影 时 ， 人 们 往往 更 喜欢 直接 复制 按钮 的 图 形 ， 而 不 是 重新 绘制 新 图 形 。 这 不 仅 降低 了 操作 的 复杂 性 ， 
还 提高 了 形状 的 精度 。 


实例 18 一 一 制作 Twitter 按钮 人 ) ) 
下 面 通 过 制作 一 个 Twitter 


按钮 , 熟悉 UI 按钮 的 制作 方法 ， 
并 巩固 学 习 图 层 相 关 操 作 。 


> 源 文件 ， 源 文件 \ 第 4 章 \Twitter 按 钮 .psd 
操作 视频 ， 视频 \ 第 4 章 \Twitter 按 钮 .mp4 


苯 六 作 、 -新 全 人 新建 


个 空白 文档 ， 如 图 4-33 所 示 。 使 用 “ 圆 角 和 矩形 | ”区 nn 
工具 ” 在 画布 中 创建 一 个 “半径 " 为 5 像素 的 | 革 B0 GS22223 
圆 角 和 矩形 ， 如 图 4-34 所 示 。 打 开 “ 图 层 样式 " 
对 话 框 ， 选 择 “ 描 边 ” 选 项 ， 设 置 参 数值 如 图 


4-35 所 示 。 
到 继续 在 对 话 框 中 选择 “内 阴影 ”选项 ， 
设置 参数 值 如 图 4-36 所 示 。 继 续 在 对 话 框 中 选择 “渐变 又 加 ”选项 ， 设 置 参 数值 如 图 4-37 所 示 。 
设置 完成 后 单 击 “ 确 定 ”按钮 ， 得 到 按钮 效果 ， 如 图 4-38 所 示 。 
芭 新 建 一 个 3x 3 像素 的 透明 文件 ， 使 用 “和 矩形 工具 ”绘制 图 案 ， 如 图 4-39 所 示 。 执 行 “ 编 
辑 ”> “定义 图 案 ” 命 令 ， 将 绘制 的 图 案 定义 为 “图 案 2”， 如 图 4-40 所 示 。 


Re 


图 4-34 图 4-35 


图 4-37 图 4-38 


图 4-39 | 图 4-40 
了 7) 按 快 捷 键 Ctl+J 复制 图 形 ， 然 后 打开 “图 层 样式 ”对 话 框 ， 选 择 “内 阴影 ”选项 ， 设 置 参 
数值 如 图 4-41 所 示 。 继 续 在 对 话 框 中 选择 “渐变 友 加 ”选项 ， 设 置 参数 值 如 图 4-42 所 示 。 最 后 选 
择 “ 图 案 芝 加” 选 项， 设置 参数 值 如 图 4-43 所 示 。 


图 4-41 图 4-42 图 4-43 


有 RB 设置 完成 后 修改 该 图 层 "填充" 为 0%, 为 按钮 添加 一 些 纹理 , 如 图 4-44 所 示 。 复制 该 形状 ， 
移动 到 “ 圆 角 和 矩形 1” 下 方 ， 并 适当 调整 其 宽度 和 位 置 ， 如 图 4-45 所 示 。 打 开 “ 图 层 样式 ”对 话 框 ， 
选择 “ 描 边 ”选项 ， 设 置 参数 值 如 图 4-46 所 示 。 

三 继续 选择 对 话 框 中 的 “内 阴影 ”选项 ， 设 置 参 数值 如 图 4-47 所 示 。 继续 选择 “光泽 ”选项 ， 
设置 参数 值 如 图 4-48 所 示 。 继 续 选 择 “ 渐 变 到 加 ”选项 ， 设 置 参数 值 如 图 4-49 所 示 。 


[£3 


图 层 与 网 页 中 的 按钮 


图 4-44 图 4-46 


设 测 时 让 。。 天 0 加 广 从 


图 4-47 图 4-48 图 4-49 
芭 继续 选择 “图 案 达 加” 选项， 设置 参数 值 如 图 4-50 所 示 。 最 后 选择 “投影 ”选项 ， 设 置 
参数 值 如 图 4-51 所 示 。 


图 4-50 图 4-51 
了 设置 完成 后 得 到 按钮 的 厚度 和 投影 ， 如 图 4-52 所 示 。 使 用 相同 的 方法 制作 按钮 左边 的 部 
分 和 小 鸟 形状 ， 如 图 4-53 所 示 。 
we 一 
图 4-52 图 4-53 
到 使 用 “ 横 排 文字 工具 ”为 按钮 输入 文字 ， 并 添加 相应 的 样式 ， 如 图 4-54 所 示 。 使 用 相同 
的 方法 制作 其 他 3 个 按钮 ， 并 分 别 使 用 快捷 键 Ctrl+G 将 相关 图 层 编组 ， 如 图 4-55 所 示 。 
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图 4-54 图 4-55 


. 现 隐 藏 背景 , 执行 “图像”" >" 裁 切 " 命令 , 裁 掉 按 钮 周围 的 透明 像素 , 如 图 4-56 所 示 。 执行 文 
件 ”>“ 导 出 ”>“ 存 储 为 Web 所 用 格式 ( 旧版 )” 命令 ， 对 图 像 进 行 优化 存储 ， 如 图 4-57 所 示 。 
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f Follow on Facebook EA Follow on Twitter 
ED 


| ”当知 识 储备 : 怎样 有 效 管理 数量 较 多 的 图 层 ? | 
| 管 : 在 制作 一 些 质感 精美 的 作品 时 ， 往 往 需要 用 到 几 十 甚至 上 百 个 图 展 ， 可 以 使 用 以 下 3 种 ， 


| 方法 管理 和 查找 图 层 。 | 
| 中 使 用 快捷 键 Ct+G 将 相关 图 层 编组 。 


(2) 右 击 图 层 缩 览 图 前 面 的 眼睛 图 标 ， 为 重要 的 图 层 或 组 定义 不 同 的 颜色 。 
(3) 使 用 “图 层 ” 面 板 最 上 方 的 过 滤器 功能 筛选 图 层 。 | 


* 使 用 不 透明 度 和 填充 


屋 “ 不 透明 度 ” 和 “填充 ”是 两 个 用 于 调整 图 像 透 明度 的 参数 。 当 图 层 中 只 包含 像素 ， 不 包 
和 像样 式 时 ， 调 整 “不 透明 度 ” 和 “填充 ”的 效果 是 一 样 的 ， 如 图 4-58 所 示 。 


含 任 全 


如 果 图 层 中 包含 图 层 样式 ， 那 么 调整 “不 透明 度 ” 会 同时 影响 图 像 像素 和 图 层 样式 的 透明 度 。 
若 调整 “填充 ”， 那 么 只 会 影响 图 像 像素 的 透明 度 ， 图 层 样式 不 会 受 影响 ， 如 图 4-59 所 示 。 
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实例 19 一 一 制作 简洁 购买 按钮 ) 


"不 透明 度 ” 和 “填充 " 
虽然 是 两 个 很 简单 的 参数 ， 但 
使 用 却 极为 频繁 。 下 面 通过 一 
个 按钮 来 讲解 这 两 个 参数 在 实 
际 操作 中 的 作用 。 


* 源 文件 : 源 文件 \ 第 4 章 \ 简 洁 购买 按钮 .psd 
操作 视频 ， 视频 \ 第 4 章 \ 简 洁 购买 按钮 .mp4 
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名 - 购 一 买 


| 


芭 执行 "文件 >“ 新建” 命令， 新 建 一 个 空白 文档 ， 如 图 4-60 所 示 。 使 用 “ 贺 角 矩形 工具 ” 
在 画布 中 创建 一 个 “半径 ”为 25 像素 的 圆 角 和 矩形 ， 如 图 4-61 所 示 。 


#8a00 


图 4-60 图 4-61 

玛 打开 “图 层 样式 ”对 话 框 ， 选择“ 外 发 光 ” 选 项 ， 设 置 参 数值 如 图 4-62 所 示 。 继 续 在 对 

话 框 中 选择 “投影 ”选项 ， 设置 参数 值 如 图 4-63 所 示 。 
复制 “ 圆 角 矩形 1" 图 层 , 更 改 形状 填充 为 大 fa334, 如 图 4-64 所 示 。 使 用 "矩形 工具 "结合 " 减 

去 顶层 形状 ”选项 对 “ 圆 角 矩 形 1 拷贝 ”形状 进行 运算 ， 如 图 4-65 所 示 。 


图 4-62 图 4-63 


二 
图 4-64 图 4-65 
观 打开 “图 层 样式 ” 对 话 框 ， 选 择 “ 内 阴影 ”选项 ， 设 置 参 数值 如 图 4-66 所 示 。 继 续 在 对 
话 框 中 选择 “外 发 光 ” 选项， 设置 参数 值 如 图 4-67 所 示 。 最 后 选择 “投影 ”选项 ， 设 置 参数 值 如 图 
4-68 所 示 。 


全 有 全 局 六 


图 4-66 图 4-67 图 4-68 


本 设置 完成 后 单 击 “确定 ” 按钮， 设置 “填充 ”为 50% ， 可 以 看 到 按钮 效果 ， 如 图 4-69 所 示 。 
复制 形状 ， 使 用 快捷 键 Ctri+T 调 出 定 界 框 ， 将 其 垂直 翻转 ， 适 当 移 动 位 置 ， 如 图 4-70 所 示 。 


图 4-69 图 4-70 


戏 打开 “图 层 样式 ”对 话 框 ， 选 择 “内 阴影 ”选项 ， 设 置 参数 值 如 图 4-71 所 示 。 继 续 在 对 
话 框 中 选择 “内 发 光 ” 选 项 ， 设置 参数 值 如 图 4-72 所 示 。 最 后 选择 “投影 ”选项 ， 设 置 参数 值 如 
到 4-73 所 示 。 


并 fff5b5 


RN 要 局 


胡 短 贞 人 


设 于 为 上 认 秆 天生 Xi 值 


图 4-71 图 4-72 图 4-73 


芭 更 改 形状 的 “不 透明 度 " 为 90%, 使 用 " 横 排 文字 工具 " 在 画布 中 输入 文字 , 如 图 4-74 所 示 。 
执行 “文件 >“ 打开” 命令 ， 将 素材 图 像 拖 入 设计 文档 中 ， 如 图 4-75 所 示 。 


图 4-74 加 4-75 


三 隐藏 背景 , 执行 “图像 " > " 裁 切 " 命令 , 裁 掉 按钮 周围 的 透明 像素 , 如 图 4-76 所 示 。 执行 “ 
件 ”>“ 导 出 ”>“ 存 储 为 Web 所 用 格式 ( 旧版 )” 命 令 ， 对 图 像 进行 优化 存储 ， 如 图 4-77 所 示 。 


裁 切 


基于 
透明 像素 (A) 

〇 左上 角 像 素 闻 ) 
右 下 角 像 素颜 色 (M) 


页 (D) 左 (L) 
底 (B) 右 (R) 


| 执行 “文件 " >“ 导出” >“ 存储 为 Web 所 用 格式 (旧版 )” 命令 后 , 用 户 可 以 在 弹出 的 对 话 框 中 选择 “ 双 联 " 或 “四 | 
| 联 ” 选项， 同时 预览 多 个 格式 的 存储 效果 


< 
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: 蒙 版 是 什么 ? 应 该 怎样 使 用 ? | 
| 答 ' 图 层 蒙 版 是 用 来 控制 当前 图 层 显 示范 围 的 黑白 图 像 。 用 户 可 以 单 击 "图 层 " 面板 底部 的 “ 添 ， 
| 加 图 层 蒙 版 ”按钮 为 一 个 图 层 添加 蒙 版 ， 然 后 使 用 “画笔 工具 ” “渐变 工具 ”和 “填充 ”命令 等 | 
| 来 编辑 蒙 版 。 蒙 版 中 的 白色 表示 显示 图 层 中 的 相应 区 域 ， 黑 色 表 示 隐 藏 图 层 中 的 相应 区 域 。 


使 用 图 层 样式 


Photoshop 中 的 “图 层 样式 " 功能 允许 用 户 通过 简单 的 参数 设置 为 色 块 添加 各 种 逼真 的 三 维 效果 ， 
从 而 使 制作 出 的 物体 更 立体 、 生 动 ， 是 制作 按钮 和 图 标 不 可 或 缺 的 法 宝 。 这 些 图 层 样式 包括 “斜面 
和 浮 肤 ”“ 描 边 ”“ 内 阴影 ”“ 内 发 光 ”“ 光 泽 ”“ 颜 色 秋 加”“ 渐 变 释 加 ”“ 图 案 萤 加 ”和 “投影 ”。 


> 


通常 用 户 可 以 通过 以 下 3 种 方式 为 图 层 添加 各 种 图 层 样式 。 

层 ”>“ 图 层 样式 ”菜单 下 的 各 种 命令 。 

() 单 击 “ 图 层 ” 面 板 底部 的 “添加 图 层 样 式 ” 按 回 ， 在 弹出 的 菜单 中 选择 需要 的 样式 。 

(3) 直接 双击 相应 图 层 的 缩 览 图 部 分 , 在 弹出 的 “图 层 样式 " 对 话 框 的 左 侧 列表 中 选择 需要 的 样式 ， 


绅 


使 用 “投影 ”制作 阴影 效果 

有 影 "样式 可 以 为 图 像 添加 自然 的 阴影 效果 , 是 UI 设计 中 比较 党 用 的 图 层 样式 之 一 。 执 行 “ 
展 ”> “图 层 样式 ”> “投影 ”命令 ， 弹 出 “图 层 样式 ”对 话 框 ， 并 自动 选中 “投影 ”选项 。 用 户 可 
在 和 本 右 网 稍 娄 攻关 中 角度 投影 的 颜色 、 大 小 、 范 围 和 距离 等 属性 ， 如 图 4-79 所 示 。 


未 浴 加 投影 样式 已 棒 加 投影 样式 


图 4-79 


第 4 章 图 层 与 网 页 中 的 按钮 


使 用 “ 描 边 ”为 按钮 添加 轮廓 @ 


“ 描 边 " 样式 用 于 为 形状 和 图 层 添 加 描 边 , 是 一 个 非常 简单 实用 的 样式 。 用 户 可 执行 “图 层 " > " 
层 样 式 ”>“ 描 边 ” 命 令 ， 弹 出 “图 层 样 式 ” 对 话 框 ， 并 自动 选中 “ 描 边 ”选项 ， 然 后 在 右 侧 参数 
设置 描 边 大 小 、 颜 色 和 不 透明 度 等 属性 ， 如 图 4-80 所 示 。 


OO 


未 添加 描 边 添加 描 边 样式 


EE 


图 4-80 


对 于 形状 图 层 来 说 ,使 用 选项 栏 中 的 “ 描 边 ”和 “ 描 边 ”图 层 样式 都 可 以 为 其 添加 描 边 效 果 。 两 者 的 区 别 在 于 : 
“ 描 边 ”选项 可 以 设置 描 边 样式 ， 如 虚线 ; “ 描 边 ”图 层 样式 可 以 设置 “不 透明 度 ” 和 “混合 模式 ” 


实例 20 制作 简单 可 爱 的 按钮 © 


对 于 一 些 立体 感 遥 
真 、 质 感 精美 的 按钮 来 
说 , 仅 靠 "投影 " 和 " 描 ”里 
边 " 样式 是 达 不 到 制作 ”图 吕 并 渤 
需求 的 ， 但 是 制作 一 些 

相对 简单 的 图 形 按钮 还 是 可 以 胜任 的 。 
这 类 风格 的 按钮 和 图 标 适 合 应 用 于 儿童 
类 的 网 站 。 


* 源 文件 : 源 文件 \ 第 4 章 \ 简单 可 爱 的 按钮 .psd 
* 操作 视频 :视频 \ 第 4 章 \ 简单 可 爱 的 按钮 .mp4 


加 执行 “文件 > 新建" 命令， 新建 一 个 空白 文档 ， 如 图 4-81 所 示 。 使 用 “ 圆 角 和 矩形 工具 ” 
在 画布 中 创建 一 个 “半径 ”为 100 像素 的 圆 角 矩形 ， 如 图 4-82 所 示 。 

码 打开 “图 层 样式 ”对 话 框 ， 选 择 “ 描 边 ” 选 项 ， 设 置 参数 值 如 图 4-83 所 示 。 继 续 在 对 话 
框 中 选择 “渐变 熏 加 ”选项 ， 设 置 参数 值 如 图 4-84 所 示 。 

三 最 后 在 对 话 框 中 选择 “投影 ”选项 ， 设 置 参 数值 如 图 4-85 所 示 。 设 置 完 成 后 单 击 “确定 ” 
按钮 ， 得 到 按钮 效果 ， 如 图 4-86 所 示 。 

双打 开 “字符 " 面板， 设置 参数 ， 然 后 在 按钮 中 输入 文字 ， 如 图 4-87 所 示 。 打 开 “ 图 层 样式 ” 
对 话 框 ， 选 择 “投影 ” 选 项 ， 设 置 参 数值 如 图 4-88 所 示 。 
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图 4-84 


图 4-83 


图 4-86 


杀生 局 


TITTT TI 于 、 4 


图 4-87 图 4-88 
4-89 所 示 。 使 用 相同 的 方法 制 


EB 设置 完成 后 单 击 “ 确 定 ” 按 钮 ， 可 以 看 到 文字 效果 ， 如 
作 其 他 3 个 按钮 ， 得 到 最 终 效果 ， 如 图 4-90 所 示 。 


F 747 


全 4 


图 4-89 图 4-90 
三 隐藏 背景 和 其 他 3 个 按钮 ， 执 行 “ 图 像 ”> “ 裁 切 ”命令 ， 裁 掉 按 钮 周围 的 透明 像素 ， 如 医 


4-91 所 示 。 执 行 “文件 ”>“ 导 出 ”>“ 存 储 为 Web 所 用 格式 ( 旧版 ) ”命令 ， 如 图 4-92 所 示 。 


图 4-91 图 4-92 


a 知识 储备 : “投影 ”和 “ 描 边 ”有 哪些 | 
答 : 有 时 候 我 们 想 要 实现 双 描 边 效果 ， 该 如 何 操作 呢 ? 可 以 使 用 “投影 ” 样式 来 模拟 描 边 效 ， 
果 。 当 设置 “距离 ”和 “扩展 ” 均 为 0 时 ， 即 可 得 到 边缘 很 硬 的 投影 ， 完 全 和 描 边 的 效果 一 样 。 


“斜面 和 浮雕 "样式 允许 用 户 通过 简单 的 参数 设置 , 为 平面 色 块 添加 十 分 逼真 的 止 陷 和 吓 起 效果 ， 
从 而 产生 立体 感 。 选 中 相应 图 层 ， 执 行 “ 图 层 ”> “图 层 样式 ”> “斜面 和 浮雕 ”命令 ， 即 可 打开 “ 医 
层 样式 ”对 话 框 ， 根 据 操作 需求 自 定义 斜面 浮雕 参数 值 ， 如 图 4-93 所 示 。 
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“和 斜面 和 浮雕 ”是 一 个 比较 重要 的 样式 ， 被 频繁 应 用 于 UI 设计 与 制作 。 该 样式 的 参数 相对 复杂 ， 
面 分 别 对 它们 进行 讲解 。 
样式 : 用 于 设置 们 面 和 浮 肤 的 方式 , 包括 “外 和 斜面 ” “内 斜面”“ 浮 雕 效果 ”“ 枕 状 浮 膝 ”和 “ 描 
边 浮 帷 ”5 个 选项 ， 最 常用 的 是 “内 斜面 ”。 
方法 : 用 于 设置 斜面 和 浮 对 的 显示 和 处 理 方式 ， 包 括 “ 平 滑 ” “雕刻 清晰 ”和 “雕刻 柔和 ”3 种 


深度 : 用 于 设置 凸 起 和 凹陷 的 幅度 ， 设 置 的 参数 值 越 大 ， 凹 凸 效 果 越 明 显 。 

向 : 当 设置 “方向 ”为 “上 ”时 ， 将 制作 图 层 突出 效果 ; 当 设置 “方向 ”为 “下 ”时 ， 将 制 
作 图 层 下 陷 效果 。 
角度 /高 度 : 这 两 个 选项 分 别 用 于 设置 光源 照射 的 角度 和 高 度 ， 这 将 对 和 斜面 和 浮雕 效果 产生 决定 
性 的 影响 。 用 户 可 以 直接 在 圆 盘 中 反复 拨 动 指针 ， 以 试验 出 更 符合 需求 的 效果 。 
使 用 全 局 光 : 若 勾 选 该 项 ， 那 么 该 文档 中 所 有 包含 并 勾 选 该 项 的 图 层 样 式 都 将 自动 使 用 当前 光 
源 角 度 设置 。 若 要 为 每 个 样式 单独 使 用 不 同 的 光照 角度 ， 那 么 请 取消 勾 选 该 项 。 
光泽 等 高 线 : 用 于 设置 光泽 的 生成 算法 ， 选 用 不 同 的 等 高 线 可 以 产生 不 同形 状 的 高 光 ， 以 模拟 


© 9@ 9@ oo @ 8 
过 


不 同 物体 的 质感 。 如 图 4-94 所 示 为 Photoshop 内 置 的 等 高 线 样式 。 


PI\Yory 
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图 4-94 
加 高光 模式 /阴影 模式 : 这 两 个 选项 用 于 设置 指定 的 高 光 和 阴影 颜色 使 用 何 种 方式 与 图 层 颜色 混合 ， 
以 产生 不 同 的 高 光阴 影 效 果 ， 作 用 与 图 层 “ 混 合 模式 ”相同 。 


实例 21 一 一 制作 数据 统计 按钮 ) 


般 情 况 下 ， 单 使 了 i 
aa 》 源 文件 ， 源 文件 第 4 章 \ 数 据 统计 按钮 psd 
面 与 浮 肉 ”样式 很 难 制作 出 效 ”5 轼 局 操作 视频 ， 视 频 \ 第 4 章 \ 数 据 统 计 按钮 .mp4 
果 自 然 逼 真 的 立体 感 ， 更 可 


候 还 需要 “内 阴影 ”和 “投影 
等 样式 的 配合 。 下 面 就 通过 一 
个 实例 来 了 解 各 种 样式 的 立 
样 实现 。 
到 执行 "文件 >“ 新 建 " 
个 空白 文档 , 如 医 ee 
在 画布 中 创建 一 个 色 的 正 贺 , 如 图 1 
打开 “图 层 样 式 ” 对 话 框 ， 选 择 “ 
选项 ， 设 置 参数 值 如 图 4_97 所 示 。 


园 


图 层 与 网 页 中 的 按钮 


图 4-95 4 4-96 图 4-97 
芭 设置 完成 后 单 击 “确定 ”按钮 ， 得 到 图 形 效果 ，“ 图 层 ” 面 板 如 图 4-98 所 示 。 新 建 图 层 ， 
填充 白色 并 创建 剪 轨 莹 版 ， 然后 使 大 号 的 柔 边 橡 擦 擦 除 正 圆 中 间 的 部 分 ， 效 果 如 图 4-99 所 示 。 
复制 “椭圆 1” 并 移动 位 置 到 “图 层 ”面板 最 上 方 ， 将 其 等 比例 缩放 ， 设 置 图 层 不 透明 度 
为 100%， 修改“ 填充 颜色 ”如 图 4-100 所 示 。 


图 4-98 到 4-99 图 4-100 
加 打开 ' 轿 层 样式 " 对 话 框 ， 选 择 “斜面 和 浮雕 ”选项 ， 设 置 参 数值 如 图 4-101 所 示 。 继 续 
在 对 话 框 中 选择 “内 阴影 ”选项 ， 设置 参数 值 如 图 4-102 所 示 。 继 续 选 择 “图案 琶 加 ”选项 ， 设 置 
参数 值 ( 可 载 入 外 部 素材 图 案 使 用 )， 如 图 4-103 所 示 。 


夏 位 为 & 值 


图 4-101 图 4-102 图 4-103 
枉 最 后 在 对 话 框 中 选择 “投影 ”选项 ， 设 置 参数 值 如 图 4-104 所 示 。 设 置 完成 后 ， 可 以 看 到 
按钮 有 了 一 定 的 立体 效果 ， 如 图 4-105 所 示 。 打 开 “ 字 符 ” 面 板 进行 相应 设置 ， 然 后 在 按钮 中 央 输 
入 数字 ， 如 图 4-106 所 示 。 
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DT 


图 4-104 图 4-105 图 4-106 


了 打开 “图 层 样式 ”对 话 框 ， 选择“ 投影 ”选项 ， 设 置 参 数值 如 图 4-107 所 示 。 设 置 完成 后 
得 到 文字 投影 效果 ， 然 后 将 相关 图 层 编组 为 “100%”， 如 图 4-108 所 示 。 


图 4-107 图 4-108 
到 在 按钮 下 方 新 建 图 层 , 使 用 柔 边 画笔 绘制 一 条 白色 细 线 ,并 修改 其 “混合 模式 " 为 “ 柔 光 "”， 
“不 透明 度 " 为 70%， 如 图 4-109 所 示 。 为 该 图 层 添 加 蒙 版 , 使 用 黑色 柔 边 画 笔 涂抹 掉 线 条 的 两 端 ， 
制作 出 射线 效果 ， 如 图 4-110 所 示 。 


湘 
用 


4-110 


4-111 所 示 。 整 理 图 层 并 将 其 


图 4-109 图 
图 


吏 使 用 相同 的 方法 制作 其 他 按钮 和 线条 ， 得 到 最 终 效果 ， 如 医 
编组 ，“ 图 层 ” 面 板 如 图 4-112 所 示 。 


这 里 使 用 蒙 版 两 头 渐 隐 的 效果 ,用户 也 可 以 先 使 用 “钢笔 工 
| 状 动态 ”选项 中 设置 “大 小 拌 动 ”控制 为 “钢笔 压力 ”， 开启 “模拟 


出 直线 路 径 , 在 “画笔 "面板 的 “ 形 
J” 描 边 路 径 


时 


图 4-111 
隐藏 背景 和 不 相关 的 对 象 ， 执 行 “ 图 像 ”> “ 裁 切 ”命令 ， 将 会 裁 掉 按钮 周围 的 透明 像素 ， 
如 图 4-113 所 示 。 执行 “文件 ”>“ 导 出 ”>“ 存 储 为 Web 所 用 格式 ( 旧版 ) ”命令 ， 对 图 像 进行 优 
化 存储 ， 如 图 4-114 所 示 。 


急切 Ex=) 


基于 
加 透明 像素 (A 


图 4-113 图 4-114 


a 知识 储备 : 可 以 将 常用 的 样式 组 合 存 储 起 来 吗 ? | 
答 : 用 户 可 以 打开 "样式 " 面板 , 选用 Photoshop 预 设 的 常用 样式 , 还 可 以 使 用 面板 下 方 的 " 创 ; 
| 建新 样式 ”按钮 将 当前 图 层 的 样式 存储 起 来 。 | 


“斜面 和 浮雕 ”中 上 默认 的 “高 光 模 式 ” 为 “ 滤 色 ”， 因 为 它 可 以 过 滤 掉 色彩 中 的 黑色 ， 使 颜色 大 幅 变 亮 ， 更 适 
合作 为 高 光 。 相 应 的 阴影 的 “正片 谷底 ” 则 可 以 过 滤 掉 色彩 中 的 白色 ， 使 颜色 变 暗 ， 更 适合 作为 阴影 


“内 阴影 ”样式 可 以 为 图 像 添加 向 内 散发 的 阴影 效果 ， 通 常 与 “斜面 和 浮雕” 样式 配合 可 以 制 
作出 简单 的 水 晶 质感 。 

若 要 应 用 “内 阴影 " 样式 , 可 先 选中 相应 图 层 , 然后 执行 “图 层 ”>“ 图 层 样 式 ” >“ 内 阴影 " 命令 ， 
在 弹出 的 “图 层 样式 ”对 话 框 中 适当 设置 各 项 参数 ， 如 图 4-115 所 示 。 


“内 阴影 ”样式 包含 一 个 “距离 ”选项 ， 这 决定 了 最 终 阴 影 效 果 的 位 移 。 若 设置 “距离 ”为 0， 那 么 就 完全 可 


以 把 它 当 作 “ 内 发 光 ” 使 用 。 类 似 的 “投影 ”和 “外 发 光 ” 也 可 以 相互 转换 
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未 添加 内 阴影 添加 内 阴影 
图 4-115 


实例 22 一 一 制作 国 形 立体 按钮 © 


本 实例 主要 制作 了 一 款 立 体 

感 很 强 的 按钮 ， 其 中 红色 按钮 使 用 
“内 阴影 ”样式 体现 立体 感 ， 高 
光 部 分 是 画笔 绘制 出 来 的 。 此 外 
实例 中 还 使 用 了 “变形 文字 " 功能 ， 
将 一 排 文 字 扭曲 为 上 弧 形 ， 以 贴 合 弧 形 的 按钮 。 


* 源 文件 ， 源 文件 \ 第 4 章 \ 圆 形 立体 按钮 .psd 
操作 视频 : 视频 \ 第 4 章 \ 圆 形 立体 按钮 .mp4 


0 执行 "文件 >“ 打开 ”命令 ， 打 开 素 材 图 像 ， 如 图 4-116 所 示 。 使 用 “椭圆 工具 ”在 画 
布 右 侧 创建 一 个 任意 颜色 的 正 圆 ， 如 图 4-117 所 示 。 


图 4-116 图 4-117 
芭 打开 “图 层 样 式 ” 对 话 框 选择“ 渐变 二 加 ”选项 ， 设 置 参 数值 如 图 4-118 所 示 。 继 续 选 


择 对 话 框 中 的 “投影 ”选项 ， 设 置 参数 值 如 图 4-119 所 示 。 

有 设置 完成 后 单 击 “确定 ”按钮 ， 可 以 看 到 正 圆 效 果 ， 如 图 4-120 所 示 。 复 制 该 形状 ， 清 除 
图 层 样 式 , 将 其 略微 上 移 ， 并 修改 “填充 ” 为 #6e1010， 如 图 4-121 所 示 。 打开“ 图 层 样式 ”对 话 框 ， 
选择 “内 阴影 ”选项 ， 设 置 参 数值 如 图 4-122 所 示 。 
到) 设置 完成 后 单 击 “确定 ”按钮 ， 得 到 图 形 效果 ， 如 图 4-123 所 示 。 载 入 正 圆 的 选区 ， 新 建 
层 , 修改 其 “混合 模式 ”为 “又 加 ”,， 然后 使 用 白色 柔 边 画 笔 涂 抹 出 按钮 的 高 光 ， 如 图 4-124 所 示 。 
使 用 相同 的 方法 略微 压 暗 按钮 左上 方 ， 制 作出 阴影 ， 如 图 4-125 所 示 。 
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Ey 


层 与 网 页 中 的 按钮 


信 色 

三 曾 
后 可 fR) 
与 图 层 : 


并 上 


Ca 
图 4-120 图 4-121 图 4-122 
OO | 
| 多 各 
I 上 呈 
图 4-123 图 4-124 到 4-125 


全 使 用 "钢笔 工具 ”绘制 出 一 大 块 高 光 , 形状 “填充 "为 放 f9999,， 如 图 4-126 所 示 。 选择 “ 钢 
笔 工具 ”， 设 置 “路 径 操作 ” 为 “ 减 去 顶层 形状 ”， 将 高 光 项 端 挖 一 个 孔 ， 如 图 4-127 所 示 。 使 月 
相同 的 方法 制作 其 他 高 光 部 分 ， 如 图 4-128 所 示 。 


SRR 


图 4-126 图 4-127 图 4-128 


十 


国 K eer 


了 为 该 图 层 添加 蒙 版 , 使 用 黑色 柔 边 画笔 涂抹 高 光 下 半 部 分 ,如 图 4-129 所 示 。 使 用 "椭圆 工具 
在 按钮 下 方 创 建 一 个 “填充 ” 为 #afafb4 的 正 圆 , 如 图 4-130 所 示 。 打开 “图 层 样式 ”对话 框 , 选择 “内 
阴影 ”选项 ， 设 置 参数 值 如 图 4-131 所 示 。 


癌 


图 4-129 图 4-130 习 4-131 
玛 设置 完成 后 可 以 看 到 按钮 边框 有 了 一 些 立 体感 ， 如 图 4-132 所 示 。 使 用 前 面 制作 高 光 的 方 
法 制作 出 按钮 边框 的 高 光 ， 如 图 4-133 所 示 。 为 高 光 添 加 蒙 版 ， 使 用 黑色 柔 边 画 笔 适当 擦 虚 高 光 的 


边缘 ， 如 图 4-134 所 示 。 


图 4-132 图 4-133 图 4-134 
三 载 入 按钮 外 框 的 选区 ， 将 其 适当 缩小 ， 并 新 建 图 层 ， 填 充 黑色 ， 如 图 4-135 所 示 。 使 用 大 
号 的 柔 边 橡皮 擦 将 黑色 两 边 擦 掉 一 些 ， 如 图 4-136 所 示 。 执行 “ 滤 镜 ” >“ 模糊”>“ 高 斯 模糊 ”命令 ， 
将 色 块 模糊 一 下 ， 如 图 4-137 所 示 。 


图 4-136 图 4-137 
芭 设置 该 图 层 " 不 透明 度 " 为 26% , 并 将 其 剪 切 至 下 方 图 层 , 制作 出 阴影 效果 , 如 图 4-138 所 示 。 
使 用 相同 方法 绘制 白色 到 透明 的 高 光 ， 如 图 4-139 所 示 。 继 续 使 用 相同 的 方法 ， 在 按钮 最 下 方 制作 
出 投影 效果 ， 如 图 4-140 所 示 。 
了 V) 新 建 图 层 ， 使 用 “矩形 选 框 工具 ”创建 一 个 选区 ,并 填充 白色 ， 如 图 4-141 所 示 。 执行 “ 渡 
镜 ”>“ 杂 色 ”> “添加 杂 色 ”命令 ， 为 色 块 添加 一 此 杂 杂 色 ， 如 图 4-142 所 示 。 修 改 该 图 层 “ 混 合 模 
式 ” 为 “ 柔 光 ”，“ 不 透明 度 ”为 59% ， 为 投影 添加 一 些 纹理 ， 如 图 4-143 所 示 。 


Pp 适当 设置 字符 属性 ， 妇 


网 


恨 样 式 ”对话 框 ， 选 择 “内 
对 话 杠 中 选择 “渐变 过 加 ” 选项 ， 设 置 参数 值 如 医 


图 层 与 网 页 中 的 按钮 


图 4-139 


和 4-144 所 示 ， 然 后 在 按钮 上 输入 文字 ， 并 将 
影 ” 选 项 ， 设 置 参 数值 如 医 


i 


4-145 所 示 。 继 续 


图 4-145 


了 BE 设 置 完成 后 单 击 “确定 " 按钮 , 得 到 文字 效果 , 妇 


形 文字 ”对 话 框 ， 设 置 参数 ,对 文字 进行 扭 


文字 变形 效果 ， 如 
同 的 方法 制作 按钮 的 其 
"图像 ”>“ 裁 切 ” 命令 
格式 (旧版 命令， 对 


4-149 所 示 。 


和 4-147 所 示 。 执行 “文件 ” > “变形 
和 4-148 所 示 。 设置 完成 后 和 


， 裁 掉 按钮 周 


他 部 分 ， 完 成 制作 


4-150 所 示 。 隐 藏 背景 和 不 相关 的 
月 像素 。 执 行 “ 文 件 ” > “ 


图 像 进行 优 化 存储 ,页 
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图 4-147 图 4-148 图 4-149 


图 4-150 图 4-151 


2 使 用 “内 发 光 ” 和 “外 发 光 ” 制 作 发 光 效果 惩 


“内 发 光 ” 和 “外 发 光 ” 样式 可 以 为 形状 添 加 向 内 和 向 外 发 散 的 4 光 效 果 。 若 要 应 用 “内 发 光 ” 
或 “外 发 光 ” 样式 ， 可 先 选 中 相应 图 层 ， 然 后 执行 “图 层 ”> “图 层 样式 ”> “内 发 光 / 外 发 光 ” 命 令 ， 
在 弹出 的 “图 层 样 式 ” 对 话 框 中 适当 设置 各 项 参数 ， 如 图 4-152 所 示 。 


图 4-152 


实例 23 一 一 制作 逼真 的 皮革 按钮 


本 实例 主要 制作 一 款 皮革 按钮 ， 虽 然 大 体形 状 比较 简单 ， 但 包含 的 小 细节 比较 
多 。 按钮 的 皮革 质感 来 自 于 一 款 皮革 纹理 ,配合 “斜面 与 浮雕 ” “内 发 光 ” 和 “ 描 边 ” 
等 样式 建立 和 完善 立体 效果 ， 最 终 得 到 逼真 的 皮革 质感 。 


加 执行 “文件 ” 


图 层 与 网 页 中 的 按钮 


* 源 文件 : 


建 一 个 空白 文档 ， 如 


图 4-153 所 示 。 


“矩形 工具 ”在 画布 


创建 个 任意 颜 


>“ 新 建 ”命令 ， 新 
的 


形状 ， 如 医 4-154 所 示 。 打 


对 话 框 ， 选 择 “ 内 阴影 ” 
如 图 4-155 所 示 。 


”选项 ， 设置 参数 值 


源 文件 \ 第 4 章 \ 逼 真 的 皮革 按钮 .psd 
操作 视频 : 视频 \ 第 4 章 \ 允 真 的 皮革 按钮 ,mp4 


图 4-155 


案 “ 皮 革 .apt” ， 如 医 


4-156 所 示 。 


图 4-153 图 4-154 
芭 继续 选择 “图 案 到 加 ”选项 ， 按 照 图 示 操作 载 入 外 部 医 
设置 完成 后 单 击 “ 确 定 ” 按 钮 ， 得 到 图 形 效果 ， 如 图 4-157 所 示 。 


回民 


ne 
图 4-156 


3 “ 贺 


和 托 形 


打开 “ 
框 中 的 “ 描 边 ” 


选项 ， 


戏 继续 选择 对 话 框 中 的 


辐 层 样式 ”对 话 框 ， 选 择 “斜面 和 浮 有 内” 迁 项 


图 4-157 


具 ” 在 画布 中 创建 一 个 “填充 ”为 #1d1d1d 的 形状 ， 如 医 


4-158 所 示 。 


设置 参数 值 如 图 4-160 所 示 。 


设置 参数 值 如 医 


4-159 所 示 。 继 续 选择 对 话 


' 内 阴影 ”选项 ,， 


设置 参数 值 如 医 


4-161 所 示 。 继 续 选 择 对 话 框 中 的 


“投影 ”选项 ， 设 置 参 数值 如 医 


4-163 所 示 。 


4-162 所 示 。 设 置 完成 后 和 


EB 击 “ 确 定 ”按钮 ， 得 到 


四 形 效果 ， 如 医 
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图 4-158 图 4-160 


4| 4-161 图 4-162 图 4-163 
三 使 用 相同 方法 完成 相似 内 容 的 制作 ， 如 图 4-164 所 示 。 继 续 使 用 “ 圆 角 矩形 工具 ”， 设 置 
描 边 颜色 为 #d0a563，“ 描 边 类 型 ”为 虚线 ， 在 画布 中 创建 形状 , 修改 填充 为 0%， 如 图 4-165 所 示 。 


图 4-164 图 4-165 


三 双击 该 图 层 缩 览 图 ， 在 弹出 的 “图 层 样式 ”对 话 框 中 选择 “ 描 边 ”选项 ， 设 置 参 数值 如 区 
4-166 所 示 。 继 续 在 对 话 框 中 选择 “内 阴影 ”选项 ， 设 置 参数 值 如 图 4-167 所 示 。 


认 村 ji 值 


图 4-166 图 4-167 


观 选择 对 话 框 中 的 “渐变 又 加 ”" 选项, 设置 参数 值 如 图 4-168 所 示 。 设置 完成 后 修改 该 攻 
充 ” 为 0%， 得 到 补丁 效果 ， 如 图 4-169 所 示 。 


层 " 填 


图 层 与 网 页 中 的 按钮 


图 4-168 图 4-169 


三 将 相关 图 层 编 组 ， 并 使 用 “ 圆 角 和 矩形 工具 ”创建 一 个 “半径 ”为 40 像素 的 形状 ， 如 区 
4-170 所 示 。 

了 选择 “矩形 工具 ”， 设 置 “ 路 径 操作 ”为 “ 减 去 顶层 形状 ”选项 ， 减 掉 形状 的 一 半 ， 如 医 
4-171 所 示 。 为 图 层 添 加 图 层 样 式 ， 使 用 相同 方法 完成 相似 内 容 的 制作 ， 如 图 4-172 所 示 。 


图 4-170 图 4-171 图 4-172 


0 打开 "字符 " 面板 , 设置 参数 , 在 按钮 上 输入 文字 , 并 添加 相应 的 图 层 样式 , 如 图 4-173 所 示 。 
得 到 最 终 效果 ， 如 图 4-174 所 示 。 
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图 4-173 司 4-174 


至 隐藏 背景 , 执行 “图 像 "> " 裁 切 " 命令, 裁 掉 按钮 周围 的 透明 像素 , 如 图 4-175 所 示 。 执 行 " 
件 ”>“ 导 出 ”>“ 存 储 为 Web 所 用 格式 ( 旧版 )” 命 令 ， 对 图像 进行 优化 存储 ， 如 图 4-176 所 示 。 


当知 识 储备 : 圆 角 矩 形 创建 完成 后 ， 可 以 修改 圆 角 大 小 吗 ? | 
| 管 : 目前 Photoshop CC 已 经 支持 创建 后 直接 通过 参数 调整 圆 角 大 小 ， 用 户 可 以 在 工具 选项 
| 栏 中 修改 圆 角 大 小 ， 同 时 也 可 以 在 “属性 ”面板 中 修改 。 | 
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Download Now 


图 4-175 图 4-176 


46 荐 合 用 本 笔 T 具 二 化 按 馈 5 


在 网 页 设计 中 ，“ 画 笔 工具 ” 常 被 用 于 处 理 蒙 版 ， 绘 制 更 复杂 的 明暗 效果 ， 或 者 为 按钮 添加 一 
些 随机 的 纹理 。 


二 使 用 画笔 工具 @ 
“画笔 工具 ”的 使 用 方法 并 不 困难 ， 如 图 4-177 所 示 为 “画笔 工具 ”的 选项 栏 。 用 户 可 以 通过 
多 种 参数 的 设置 和 组 合 绘制 出 不 同 效果 的 笔触。 


图 4-177 


加 ”画笔 预 设 : 单 击 该 按钮 ,可 以 打开 “画笔 预 设 " 面板， 用户 可 在 此 选择 不 同形 状 的 笔 刷 进行 绘制 。 

用 户 还 可 以 单 击 面板 右上 方 的 国 按 钮 ， 使 用 菜单 中 的 各 项 命令 载 入 更 多 的 预 设 笔 刷 或 外 部 笔 刷 
使 用 。 

@ ”切换 画笔 面板 : 单 击 该 按钮 ， 可 快速 打开 “画笔 ”面板 ， 用 户 可 以 在 此 对 画笔 进行 更 加 复杂 和 
精细 的 设置 ， 以 绘制 出 更 具 随机 性 和 动态 效果 的 笔触 。 具 体内 容 将 在 下 一 小 节 中 讲 。 

四 ”模式 : 用 于 指定 使 用 画笔 绘制 的 颜色 如 何 与 下 方 图 层 颜 色 进 行 混合 ， 与 图 层 “ 混 合 模式 ”的 功 
能 相同 。 相 比较 而 言 ， 人 们 还 是 更 喜欢 使 用 图 层 “ 混 合 模式 ”混合 颜色 ， 因 为 更 容易 控制 效果 ， 

而 且 可 以 随时 修改 。 

加 ”不 透明 度 / 流量 : 这 两 个 参数 都 可 以 用 来 控制 画笔 绘制 的 浓度 ， 取 值 范 围 为 0% ~ 100%。 


实例 24 一 一 制作 苹果 应 用 商店 按钮 


使 用 画笔 绘制 高 光 对 于 
初学 者 来 说 是 个 挑战 。 绘 制 
时 如 果 能 够 使 用 选区 限制 高 
光 的 整体 范围 ， 不 仅 能 够 降 
低 操作 难度 ， 还 能 使 涂抹 效 测 
果 更 加 准确 。 2 | Avaiatleontheiphone 
六 执行 "文件 >" 打开 ”命令 ， 
背景 图 像 ， 如 图 4-178 所 示 。 使 用 “ 圆 角 和 矩 
形 工具 ”在 画布 中 创建 一 个 “半径 ”为 8 像素 
的 圆 角 矩形， 如 图 4-179 所 示 。 


> 源 文件 ， 源 文件 \ 第 4 章 \ 苹 果 应 用 商店 按钮 .psd 
* 操作 视频 : 视频 \ 第 4 章 \ 苹 果 应 用 商店 按钮 ,mp4 


App Store 


图 4-178 


玛 打开 “图 层 样 式 ” 对 话 框 ， 选 择 “ 描 边 ” 
阴影 ”选项 ， 设 置 参数 值 如 图 4-181 人 继续 在 对 话 框 中 选择 “内 发 光 ” 选 项 ， 设 


框 中 选择 “内 


置 参 数值 如 图 4-182 所 示 。 


图 4-180 


双 在 对 话 框 中 选择 “渐变 到 加” 选项 ,设置 参数 值 如 图 


图 4-181 


图 4-179 


影 ”选项 , 设置 参数 值 如 图 4-184 所 示 。 修改 其 “混合 模式 ”为 


充 ” 为 35%， 制 作出 底座 部 分 ， 如 图 4-185 所 示 。 


4-183 图 4-184 


J) 复制 该 形状 至 其 下 方 ， 打开 “ 


如 图 4-186 所 示 。 设 置 完成 后 ， 修 改 该 医 
图 “ 圆 角 和 天 形 1”， a “投影” 样式， 并 对 其 形状 进行 调 


页 ， 设 置 参数 值 如 恬 


4-180 所 示 。 继 红 


图 4-182 


在 对 话 


4-183 所 示 。 最 后 在 对 话 框 中 选择 “" 投 


“ 滤 色 ”，“ 不 透明 度 " 为 70%，'" 填 


EE 对 话 框 ， 选 择 “ 投 影 ” 选 
“填充 ”为 0%， 可 以 看 到 底 枯 的 皮影 扩大 了 上 此， 如 
整 ， 如 图 4-188 所 示 。 


图 4-185 


， 并 修改 相应 参数 ， 


4-189 所 示 。 在 " 圆 角 和 拓 


1 副本 2” 


氏 其 “不 透明 度 ” 至 5% ， 如 图 4-190 


4-187 所 示 。 复 制 
三 使 用 "画笔 工具 ” ,按照 图 示 载 入 并 选择 相应 的 画笔 , 如 医 
下 方 新 建 图 层 ， 使 用 方 头 画 笔 在 形状 边缘 绘制 一 条 黑 线 ， 并 降低 
所 示 。 
本 打开 素材 图 标 “素材 \ 第 4 章 \002. jpg”, 使 用 “ 魔 棱 
适当 调整 位 置 和 大 小 ， 如 图 4-191 所 示 。 


Ml 


具 " 将 苹果 抠 


日 ， 然后 将 


拖 入 文档 ， 
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图 4-189 图 4-190 图 4-191 
玛 载 入 下 方形 状 的 选区 ,然后 为 苹果 图 层 添加 蒙 版 ,使 苹果 嵌入 按钮 ,如 图 4-192 所 示 。 打 开 " 
层 样式 ”对 话 框 ， 选择“ 和 斜面 和 浮 膨 ”选项 ， 设 置 参 数值 如 图 4-193 所 示 。 继 续 在 对 话 框 中 选择 “ 
阴影 ”选项 ， 设 置 参 数值 如 图 4-194 所 示 。 


到 


寺 


如 果 图 层 中 同时 包含 “颜色 乔 加 ”“ 渐 变奏 加 ”和 “图 案 释 加 ”中 的 两 个 或 三 个 , 且 “ 混合 模式 “ 均 为 “正常 ” 
“不 透明 度 ” 均 为 100%， 那么 只 有 一 个 可 见 ， 优 先 显示 顺 序 为 : 颜色 释 加 > 渐变 番 加 > 图 案 乔 加 


三 在 对 话 框 中 选择 “颜色 彼 加 ”选项 ， 设 置 参 数值 如 图 4-195 所 示 。 设 置 完成 后 单 击 “ 确 定 ” 
按钮 ， 可 以 看 到 苹果 的 效果 ,如 图 4-196 所 示 。 新 建 图 层 , 使 用 “画笔 工具 ”分 别 绘制 两 条 黑白 线条 ， 
并 降低 “不 透明 度 ”， 如 图 4-197 所 示 。 

加 复制 该 图 层 ， 将 其 向 右 移动 2 像素 ， 然 后 修改 “不 透明 度 ” 为 10%， 如 图 4-198 所 示 。 使 
用 相同 的 方法 制作 出 苹果 下 方 细微 的 凹凸 效果 , 如 图 4-199 所 示 。 制作 出 按钮 一 半 的 选区 , 新 建 图 层 ， 
填充 白色 ， 调 整 其 “不 透明 度 ” 为 10% ， 如 图 4-200 所 示 。 


gy 


图 4-198 图 4-199 图 4-200 


了 IV 再 新 建 图 层 ， 使 用 圆 角 柔 边 画笔 基于 选区 涂抹 白色 ， 制 作出 高 光 效 果 ， 如 图 4-201 所 示 。 
使 用 相同 的 方法 制作 出 其 他 的 高 光 ， 这 可 以 使 按钮 的 质感 更 精致 ， 如 图 4-202 所 示 。 


图 4-201 图 4-202 


于 在 “字符 " 面板 中 适当 设置 参数 ， 然 后 在 按钮 上 输入 文字 ， 如 图 4-203 所 示 。 为 文字 添加 
相应 的 图 层 样 式 ， 然 后 将 相关 的 图 层 编 组 ， 完 成 该 按钮 的 制作 ， 如 图 4-204 所 示 。 


图 4-203 图 4-204 


PE 一 


在 制作 按钮 时 ， 如 果 需 要 对 一 个 圆 角 和 矩形 进行 大 幅度 的 拉 长 或 缩短 ， 那么 最 好 使 用 “直接 选择 工具 ”调整 销 点 
的 位 置 ， 切 记 不 可 直接 使 用 快捷 键 Ctd+T 强制 伸缩 形状 ， 这 会 导致 圆 角 严重 变形 。 


加 隐藏 背景 图 层 ， 执 行 “ 图 像 ”> “ 载 切 ”命令 ， 裁 掉 按钮 周围 的 透明 像素 ， 如 图 4-205 所 
示 。 执 行 “ 文 件 ”>“ 导 出 ”> “存储 为 Web 所 用 格式 ( 旧版 )” 命 令 ， 对 图 像 进 行 优化 存储 ， 如 
妈 4-206 所 示 。 


基于 
人 @ 透明 像素 (A) 


左上 角 像 素颜 色 (0 
右 下 角 像 素颜 色 (M) 


裁 切 
回 页 ID 左 (0) 
加 底 (6) 加 右 (R) 


图 4-205 图 4-206 


a 知识 储备 : 如 何 自 定义 画笔 ? 如 何 载 入 外 部 画笔 ? | 
| 答 : 人 中 用 户 可 以 执行 “编辑 "> "定义 画布 预 设 " 命令 , 将 整 张 画布 或 选区 中 的 图 像 定义 为 画笔 。， 
| 如 果 定 义 的 区 域 为 彩色 ， 那 么 定义 画笔 后 会 变 为 黑色 ， 而 且 白色 像素 将 被 视 作 透明 像素 处 理 。 
| 加 可 以 单 击 画笔 选取 器 右上 角 的 图 按钮 , 使 用 菜单 中 的 “ 载 入 画笔 "命令 浏览 并 载 入 外 部 画笔 。| 


> 


单 击 “ 画 笔 工具 ”选项 栏 中 的 图 按钮 ， 可 以 打开 “画笔 ”面板 。 该 面板 中 提供 了 更 多 的 参数 ， 
以 便 用 户 对 画笔 形态 做 更 精细 的 设置 。 

使 用 这 些 参 数 可 以 非常 容易 地 调试 
辐 4-207 所 示 为 光 点 的 设置 步骤 。 


图 像 的 变换 操作 D 


在 第 2 章 中 已 经 为 大 家 讲解 了 最 基本 的 变换 操作 ， 包 括 “ 旋 转 ” 和 “缩放 ”。 本 节 将 继续 讲解 
他 的 变换 操作 ， 这 些 操作 有 “扭曲 ” “透视 ” “变形 ” “水 平 翻转 ”和 “垂直 翻转 ”。 
多 和 和 图像 的 翻转 多 


到 像 的 翻转 操作 包括 “水平 翻 转 ” 和 “垂直 翻转 ”， 用 户 可 以 执行 “编辑 ”> “变换 ”> “水 平 
翻转 / 垂直 翻转 ”命令 对 图 像 进 行 翻转 ， 如 图 4-208 所 示 。 


机 次 (A) Shift+Ctrl+T 


六 放 (S) 

旋转 (R) 

S(O 

担 由 (D) 

适 视 (P) 

变形 (W) 

施 转 180 度 (1) 
jj 村 旋转 90 度 (9) 
这 时 针 旋 转 90 度 (0) 


水 平 可 转 (H) 


图 4-208 
户 也 可 以 直接 按 快捷 键 Ctd+T ， 右 击 鼠 标 ， 使 用 快捷 菜单 中 的 “水 平 翻转 ”或 “垂直 翻转 ” 
命令 翻转 图 像 ， 如 图 4-209 所 示 。 


JE 村 让 竺 90 度 
六 时 针 佬 转 90 度 


本 


图 4-209 


实例 25 一 一 制作 音量 开关 按钮 ) 


有 时 可 能 需要 为 同一 款 按钮 回电 
设计 好 几 种 颜色 或 样式 ， 在 这 种 情 
况 下 ， 可 以 只 制作 其 中 一 个 ， 其 他 
的 直接 复制 调整 即 可 。 


~、 
ee © | 


* 源 文件 ， 源 文件 \ 第 4 章 \ 音 量 开关 按钮 .psd 
操作 视频 ， 视频 \ 第 4 章 \ 音 量 开关 按钮 .mp4 
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冯 执行 “文件 ” >“ 打开 ”命令 ， 打 开 背 景 图 片 ， 如 图 4-210 所 示 。 使 用 “椭圆 工具 ”在 画 
布 中 创建 一 个 白色 的 正 圆 ， 如 图 4-211 所 示 。 打 开 “ 图 层 样式 ”对 话 框 ,选择 “斜面 和 浮雕 ”选项 ， 
设置 参数 值 如 图 4-212 所 示 。 


图 4-210 


双 继 续 


图 4-211 


在 对 话 框 中 选择 “ 描 边 ”选项 ， 设 置 参 数值 如 医 


“内 阴影 ”选项 ， 设置 参数 值 如 医 


4-215 所 示 。 


图 4-213 


在 对 话 框 中 选择 


“渐变 释 加 ”选项 


医 


图 4-214 


， 设 置 参 数值 如 医 


影 ”选项 ， 设 置 参数 值 如 图 


4-218 所 示 。 


图 4-216 


4-217 所 示 。 设 置 完成 后 ， 


图 4-217 


网 至 


芭 复制 该 正 


下 方 ， 然 后 打开 “ 


同 


至 


层 最 上 方 ， 清 


该 正 


层 样 式 ， 并 将 其 等 比例 缩小 ， 


层 样式 ”对 话 框 ， 选 
4-219 所 示 。 设 置 完 成 后 ， 可 以 看 到 按钮 被 添加 了 自然 的 阴影 


4-213 所 示 。 


4-214 所 示 。 在 对 话 框 中 选择 “内 发 光 ” 选 项 ， 设 置 参数 值 如 


图 4-215 


图 4-218 


“投影 ”选项 间 


继续 在 对 话 框 中 选择 


4-216 所 示 。 最 后 在 对 话 框 中 选择 “ 投 
可 以 看 到 旋钮 的 金属 质感 已 经 很 明显 了 ， 如 


调整 参数 ， 如 


-全 二 


如 医 


4 所 示 。 


4-220 所 示 。 继 续 复制 


图 4-219 


三 修改 其 "填充 "为 #5f5f5f, 然后 使 
层 样 式 ” 对 话 框 ， 选择 “内 阴影 ”选项 
， 制 作出 凹 槽 效果 ， 如 医 


合 模式 ”为 “正片 看 底 ” 


图 4-222 
了 使 用 相同 的 方法 制作 


图 4-221 


图 层 与 网 页 中 的 按钮 


”添加 一 个 角 ， 了 到 4-222 所 示 。 打开 “ 医 


图 4-223 


到 4-223 所 示 。 设 置 完成 后 ,修改 该 图 层 “ 混 
4-224 所 示 。 


图 4-224 


4-225 所 示 。 新 建 攻 


按钮 中 心 的 凸 起 部 分 ， 如 


层 ， 载 入 “椭圆 1” 


的 选区 ， 使 用 柔 边 画笔 为 按钮 下 方 涂抹 颜 色 


图 4-226 所 示 。 使 


他 发 光 效果 ( 注意 按钮 下 方 还 有 淡淡 的 绿色 反光 效果 )， 如 图 4-227 所 示 。 


相同 的 方法 绘制 出 其 


图 4-225 


图 4-227 


玛 使 用 相同 的 方法 制作 按钮 中 心 的 文字 效果 ， 并 将 所 有 的 医 
适 位 置 ， 然 后 分 别 对 灰色 的 形状 进行 垂直 和 水 平 翻转 ， 


该 组 ， 将 其 移动 到 合 


该 组 中 的 “椭圆 1 ， 在 “图 层 

玛 设置 完成 后 , 可 以 看 到 
像 ”> “调整 ” >“ 色相 /饱和 度 ” 
可 以 看 到 绿色 的 发 光 效 果 变 成 了 红色 ， 和 区 


层 编组 ， 如 医 


4-228 所 示 。 复 所 


E 中 选择 “ 描 边 ”选项 并 修改 参数 ， 妇 


eh 了 红 


如 图 4-229 所 示 。 选 择 


4-230 所 示 。 


图 4-231 所 示 。 选择 绿 


色 的 发 光 , 执行 " 


相同 的 方法 制作 按钮 的 


完成 相似 内 容 操作 ， 使 


使 用 相同 方法 
得 到 最 终 效 果 ，“ 图 层 ” 


， 如 图 4-232 所 示 。 


单 击 “ 确 定 ” 按 钮 ， 


ull 


他 部 分 ， 如 图 4-234 所 示 。 


国 W oss CC 网 站 UI 设计 全 程 揭秘 (第 2 版 ) 


图 4-231 


图 4-234 图 4-235 
到 O) 隐藏 背景 和 不 相关 的 元 素 ， 执 行 “ 图 像 ”> “ 载 切 ”命令 ， 裁 掉 按钮 周围 的 透明 像素 ， 如 
则 4-236 所 示 。 执 行 “ 文 件 ”> “导出 ”> “存储 为 Web 所 用 格式 ( 旧版 )” 命 令 ， 对 图 像 进 行 优化 
存储 ， 如 图 4-237 所 示 。 


图 4-237 


按钮 下 方 的 指示 灯 有 强烈 的 发 光 效 果 ， 而 且 发 光 效 果 中 有 轻微 的 颗粒 感 ， 这 种 效果 可 以 使 用 “外 发 光 ” 样 式 中 
的 “ 杂 色 ”选项 实现 。 


包 知 识 储备 : 涂抹 出 的 颜色 不 是 想 要 的 效果 ， 如 何 调整 ? | 
答 : 如 果 使 用 “画笔 工具 ”涂抹 出 的 颜色 不 是 想 要 的 ,可 以 使 用 "图像 > 调整 > 色相 /饱和 度 ”， 


2 运 视 和 扭曲 “全 


执行 “编辑 ”> “变换 ”> “扭曲 ”命令 ， 可 分 别 调整 变换 框 的 4 个 控制 点 ， 从 而 对 图 像 进行 更 
加 自由 的 变形 。 

执行 “编辑 ”> “变换 ”> “扭曲 ”命令 ， 调 整 变 换 框 上 的 1 个 控制 点 ， 与 其 在 同一 水 平 线 或 垂 
直线 上 的 另 一 个 控制 点 也 会 随 之 发 生变 化 ， 从 而 产生 透视 的 效果 。 

先 创建 一 个 矩形 ， 然 后 对 其 进行 透视 变形 ， 并 调整 成 上 细 下 粗 的 效果 。 将 这 个 形状 多 次 复制 ， 
就 做 成 了 厨师 帽 的 样子 ， 如 图 4-238 所 示 。 


图 4-238 


执行 “编辑 ”> “变换 ”> “变形 ”命令 后 ， 图 像 上 会 出 现 网 格 状 变换 框 ， 这 个 变换 框 包含 16 
个 控制 点 、6 条 边 和 4 个 交叉 点 ， 这 些 元 素 全 部 都 可 以 被 调整 ， 因 此 常 被 用 来 做 大 幅度 的 编辑 操作 ， 
如 图 4-239 所 示 。 
“变形 ”的 选项 栏 中 为 用 户 提供 了 一 些 常规 的 变形 方式 ， 如 扇形 、 上 弧 、 下 弧 、 旗 帜 和 波浪 等 。 
如 图 4-240 所 示 为 使 用 “旗帜 ”将 一 组 直线 变形 为 波浪 线 的 效果 。 


图 4-239 图 4-240 


15.1 旺 导航 和 菜单 的 作用 


网 页 中 导航 条 和 菜单 的 主要 作用 就 是 帮助 用 户 


找到 需要 的 信息 ， 可 以 概括 为 以 下 3 个 方面 。 


引导 页 面 跳 转 : 网 站 页 面 中 各 种 形式 与 类 型 的 导航 和 菜单 都 是 为 了 帮助 用 户 更 方便 地 跳 转 到 不 


同 的 页 面 。 


。 定位 用 户 的 位 置 : 导航 和 菜单 还 可 以 帮助 用 户 识别 当前 页 面 与 网 站 整体 内 容 的 关系 ， 以 及 当前 


页 面 与 其 他 页 面 之 间 的 关系 。 


3 厘清 内 容 与 链接 的 关系 : 网 站 的 导航 和 菜单 是 对 网 站 整体 内 容 的 一 个 索引 和 高 度 概括 ， 它 们 的 


功能 就 像 图书 的 目录 ， 可 以 帮助 用 户 快速 找到 


[52 | 导航 的 设计 标准 


相关 的 内 容 和 信息 。 


2» 


导航 是 网 页 中 非常 重要 的 引导 性 元 素 ， 可 以 从 利用 率 、 实 现 度 、 符 合 性 和 有 效 性 4 个 方面 来 评 
全 款 写 航 六 站 业 全 全 各 信 务 名 各 确认 与 航 的 次 计 个 合理 ;种 当 对 》 让 行人 化 


利用 率 : 浏览 者 通过 导航 功能 浏览 不 同 页 面 的 


次 数 越 多 ， 说 明 导 航 的 利用 率 越 高 。 


) 实现 度 ; 实现 度 是 指 当 用 户 试图 使 用 导航 功能 时 ， 有 多 少 人 真正 通过 单 击 导航 中 的 链接 进行 了 


下 一 步 操作 。 


符合 性 : 用 户 使 用 导航 后 的 停留 时 间 和 任务 完成 度 可 以 被 用 来 衡量 导航 的 符合 度 。 页 面 的 平均 
停留 时 间 越 短 ， 任务 完成 度 越 高 ， 说 明 导航 的 符合 度 越 高 。 
有 效 性 : 可 以 用 页 面 平均 停留 时 间 来 衡量 导航 的 有 效 性 。 用 户 在 每 个 页 面 停留 的 时 间 越 短 ， 说 


明 导 航 的 功能 越 有 效 ， 符 合 度 越 高 。 


[5.3 节 网 页 设计 的 辅助 操作 5】 


网 页 设计 不 同 于 其 他 类 型 的 设计 ， 网 页 页 面 4 
方式 都 对 最 终 成 品 有 着 决定 性 的 影响 。 


各 个 元 素 的 大 小 、 颜 色 ， 应 用 的 特殊 效果 和 排列 


在 使 用 Photoshop 进行 静态 页 面 制作 时 ， 使 


参考 线 辅助 对 齐 是 必需 的 操作 ， 下 面 就 对 这 些 辅 


助 功能 进行 简单 的 介绍 ， 如 图 5-1 所 示 。 


使 用 标尺 © 


执行 “视图 ” >“ 标尺” 命令 ， 或 按 快捷 键 Crt+R， 即 可 在 文档 窗口 的 上 方 和 左 侧 各 显示 出 一 条 
标尺 。 用 户 可 以 使 用 “移动 工具 ”从 水 平 标尺 中 拖 出 水 平 参考 线 ， 从 垂直 标尺 中 拖 出 垂直 参考 线 ， 
如 图 5-2 所 示 。 


图 5-2 
拖 出 参考 线 之 后 ， 用 户 仍然 可 以 移动 位 置 。 只 需 使 用 “移动 工具 ” 移 近 参考 线 ， 待 鼠标 指针 变 
成 中 形状 时 ， 拖 动 参考 线 至 其 他 位 置 即 可 ， 如 图 5-3 所 示 。 


创建 精确 的 参考 线 
除了 从 标尺 中 自由 拖 出 参考 线 之 外 ， 用 户 还 可 以 执行 “视图 ”> “新 建 参考 线 ” 命 令 ， 弹 出 “新 
条 


建 参考 线 ” 对 话 框 ， 在 该 对 话 框 中 设置 参考 线 的 “取向 ”和 具体 的 “位 置 ”， 以 在 文档 中 创建 一 
精确 的 参考 线 ， 如 图 5-4 所 示 。 
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图 5-4 


用 户 也 可 以 执行 “视图 ”>“ 显 示 ”>“ 智 能 参考 线 ” 命 令 开启 智能 参考 线 ， 这 样 在 鼠标 经 过 文档 、 形 状 和 图 像 
的 边界 和 中 心 时 ， 就 会 自动 显示 智能 参考 线 ， 以 辅助 对 齐 物体 


在 操作 过 程 中 ， 如 果 觉 得 参考 线 对 视觉 查看 造成 障碍 ， 可 以 执行 “视图 ”>“ 显 示 额 外 内 容 ” 命 令 ， 或 者 按 快 捷 
键 Ctrl+H 将 其 临时 隐藏 。 再 次 执行 相同 的 操作 即 可 重新 显示 参考 线 


、 参 考 线 是 * 源 文件 ， 源 文件 第 5 章 \ 简 洁 导航 菜单 .psd 
页 设计 必 备 的 > 操作 视频 ， 视 频 第 5 章 简 洁 导航 菜单 mp4 
工具 ， 主 要 

用 户 规划 整 
局 或 定位 对 象 
实例 来 制作 一 款 简洁 雅致 的 导航 下 


位 菜单 ， 帮 助 读者 更 细致 地 理解 参 
考 线 在 网 页 制作 中 的 具体 使 用 方法 。 

芭 执行 "文件 "> 新建" 命 令 ， 
新 建 一 个 空白 文档 ， 如 图 5-5 所 示 。 
执行 “视图 ” >“ 新 建 参考 线 ” 命令， 
弹出 “新 建 参考 线 ” 对 话 框 ， 如 图 5-6 所 示 。 使 用 相同 方法 完成 其 余 参考 线 的 创建 ， 如 图 5-7 所 示 。 


码 全 “矩形 工具 ”绘制 填充 为 #fea00 的 形状 ， 如 图 5-8 所 示 。 打 开 “ 图 层 样式 ”对 话 框 ， 
选择 “投影 ”选项 ， we 5-9 所 示 。 


图 5-8 图 5-9 
于 继 续 使 用 "矩形 工具 " 绘制 形状 , 如 图 5-10 所 示 。 打开 “图 层 样式 " 对 话 框 , 选择 "渐变 县 
选项 ， 设 置 参数 如 图 5-11 所 示 。 执 行 “ 文 件 ”> “打开 ” 命 令 ， 将 素材 图 像 拖 入 设计 文档 中 ， 如 医 
5-12 所 示 。 


起 


图 5-10 图 5-11 
图 5-12 


加 素材 图 像 的 图 层 缩 览 图 在 “图 层 " 面板 上 如 图 5-13 所 示 。 使 用 “椭圆 工具 " 绘制 填充 为 黑色 ， 
描 边 为 #fea00 的 圆 形 ， 如 图 5-14 所 示 。 使 用 “钢笔 工具 ”绘制 不 规则 形状 ， 如 图 5-15 所 示 。 


图 5-13 图 5-14 图 5-15 
三 在 形状 的 起 始点 闭合 形状 ， 如 图 5-16 所 示 。 打 开 “ 图 层 样 式 ” 对 话 框 ， 选 择 “ 渐 变 夫 加 ” 


器 为 中 认 值 


Kone nse B= J〗 ^ 、 


选项 ， 设 置 参 数 如 图 5-17 所 示 。 


图 5-16 


0 使 用 “矩形 工具 ”在 画布 中 绘制 矩形 


到 5-17 


图 层 样式 ”对 话 框 , 选择 “内 


如 图 5-18 所 示 。 打开 


到 5-20 所 示 。 


图 5-18 


阴影 ”选项 ， 设 置 参 数 如 图 5-19 所 示 。 使 用 “ 自 定形 状 工具 ”， 在 选项 栏 中 选择 “搜索 "选项 ， 如 


天 A 人 dr 4 


图 5-19 图 5-20 


了 7 在 画布 中 绘制 形状 ， 如 图 5-21 
设置 文字 的 参数 如 图 5-22 所 示 。 


所 示 。 执行 “窗口 ”>“ 字 符 ” 命 令 ,打开 “字符 ”面板 ， 


图 5-22 


2 使 用 “ 横 排 文字 工具 ”在 画布 d 


输入 文字 ， 如 图 5-23 所 示 。 继 续 使 用 “ 横 排 文字 工具 ” 


在 画布 中 输入 文字 ， 如 图 5-24 所 示 。 


= sn 
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新 品 设计 下 载 通道 VIP 特 权 


精品 设计 


磷 ) 使 用 " 圆 角 和 矩形 工具 " 在 画布 中 绘制 形状 , 如 图 5-25 所 示 。 打开 "图 层 样式 " 对 话 框 , 选择 " 渐 
变 到 加 ”选项 ， 设 置 参 数 如 图 5-26 所 示 。 设 置 完 成 后 的 图 像 效果 如 图 5-27 所 示 。 


图 5-25 图 $-27 


了 WV) 使 用 "矩形 选 框 其 他 图 层 , 执行 "编辑 " > " 合 
并 拷贝 ”命令 ， 使 用 快捷 键 Cl+N 新 建文 档 ， 文 档 大 小 会 自动 追踪 选区 的 大 小 ， 如 图 5-29 所 示 。 


下 载 通道 VIP 特 权 


公司 理念 公司 制度 


图 5-28 图 5-29 


闻 进 入 新 文档 中 , 执行 “编辑 " >“ 选择 性 粘贴 ” >“ 原 位 粘贴 " 命令, 如 图 5-30 所 示 。 打开 “图 
层 ”面板 ， 图 层 缩 览 图 如 图 5-31 所 示 。 


一 


图 5-30 


副 执行 “文件 >“ 导 出 ”>“ 存 储 为 Web 所 用 格式 ( 旧版 )” 命 令 ， 对 其 进行 优化 存储 ， 如 
到 5-32 所 示 。 使 用 相同 方法 完成 相似 内 容 操作 ， 如 图 5-33 所 示 。 
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知识 储备 : 怎样 删除 、 隐 藏 和 锁定 参考 线 ? | 
| 答 : 四 用 户 可 以 直接 将 参考 线 拖 出 窗口 之 外 ,以 将 其 删除 。 或 者 执行 “视图 ”> “清除 参考 线 ”， 
| 命令 清除 画布 中 的 全 部 参考 线 。 | 
@) 按 快捷 键 Ctl+H 可 以 隐藏 / 显示 参考 线 、 路 径 和 选区 等 附加 元 素 。 


人 执行“ 视图 ”> “锁定 参考 线 ” 命 令 可 将 参考 线 锁定 。 


选区 对 于 任何 形式 的 设计 都 是 很 重要 的 。 很 多 时 候 ， 我 们 往往 无 法 一 次 创建 出 完全 符合 操作 需 
求 的 选区 ， 这 就 需要 对 选区 进行 进一步 的 加 工 和 修改 。 本 节 就 来 学 习 一 下 修改 选区 的 各 种 方法 ， 包 
括 羽 化 选区 和 收缩 /扩展 选区 。 


Ei 习 化 先 区 ”二 


羽化 选区 就 是 为 选区 边缘 添加 虚 化 效果 ， 使 填充 到 选区 的 图 像 或 颜色 产生 柔和 渐 隐 的 效果 ， 这 
种 操作 方式 常 被 用 来 制作 物体 的 投影 、 高 光 和 其 他 光影 效果 。 下 面 是 使 用 “羽化 ”功能 制作 投影 的 
具体 操作 步骤 。 

到 使 用 “椭圆 选 框 工 具 ” 在 物体 下 方 创建 一 个 选区 。 

码 执行 “选择 ”>“ 修 改 ” >“ 羽 化 ”命令 ， 弹 出 “羽化 选区 ”对 话 框 ， 设 置 合适 的 “羽化 半径 ” 
参数 值 。 

三 ) 单 击 “确定 ”按钮 ， 为 选区 填充 黑色 ， 然 后 适当 调整 投影 的 透明 度 和 形状 ， 如 图 5-34 所 示 。 


若 设置 的 “羽化 半径 "大 于 或 等 于 选区 半径 (例如 将 一 个 100 x 100 像素 的 选区 羽化 60 像素 ), 那么 选区 将 不 可 见 ， 
但 它 仍然 存在 ， 并 且 可 以 参与 到 操作 中 。 


扩展 /收缩 选区 > 


Photoshop 还 允许 对 选区 进行 精确 扩展 和 收缩 ， 这 是 对 “变换 选区 ”命令 的 补充 。 在 对 一 些 比 
较 复杂 的 选区 进行 等 比例 缩放 时 , 使 用 “扩展 /收缩 选区 " 命令 比 使 用 “变换 选区 ”命令 更 简单 有 效 。 


zy 


下 面 仅 以 收缩 选区 为 例 讲解 具体 操作 步骤 。 

| 并 执行 “选择 ”> “修改 ”> “收缩 ”命令 ， 弹 出 “收缩 选区 ”对 话 框 ， 
设置 合适 的 “收缩 量 ” 

了 单 击 “ 确 定 ” 接 全 ， 得 到 选区 收缩 效果 。 

码 如 果 选 区 的 收缩 幅度 过 大 ， 得 到 的 选区 品质 会 明显 降低 ( 矩形 选 框 不 会 出 现 这 种 问题 ， 无 
论 如 何 收缩 扩展 ， 都 是 准确 的 矩形 )， 如 图 5-35 所 示 。 


图 5-35 


加 深 和 减 淡 修饰 只 


“加 深 工具 ” 国 加 和 “ 减 淡 工具 ” 国 可 以 分 别针 对 图 像 的 阴影 、 中 间 调 和 高 光 部 分 进行 加 深 和 
减 淡 ， 从 而 达到 创建 或 强化 物体 立体 感 的 目的 。 
虽然 使 用 这 两 种 工具 处 理 出 的 立体 效果 要 逊色 于 图 层 样 式 和 画笔 但 对 于 那些 没有 手绘 功底 的 


用 户 来 说 ， 仍 具有 很 高 的 实用 价值 。 


单 击 工具 箱 中 的 “加 深 工具 ”按钮 国 ， 即 可 在 上 方 的 选项 栏 中 显示 相应 的 参数 。 用 户 可 以 根 
据 具 体操 作 需 要 设置 工具 属性 ， 下 面 仅 对 其 中 几 个 重要 参数 进行 讲解 ， 如 图 5-36 所 示 。 


以 加 保护 色调 


图 5-36 
加 范围 : 设置 加 深 的 颜色 范围 ， 下 拉 列 表 中 有 “中 间 调 ”“ 阴 影 ” 和 “高 光 ”3 个 选项 。 下 面 


分 别 为 对 图 像 的 高 光 范 围 和 阴影 范围 进行 加 深 的 效果 ， 如 图 5-37 所 示 。 


加 深 高 光 加 深 阴影 
图 5-37 
从 上 图 可 以 看 出 , 当 设置 “范围 " 为 “高 光 " 加 深 图 像 时 , 图 像 的 中 间 调 和 阴影 部 分 不 会 受到 影响 。 
当 设 置 “范围 ”为 “阴影 ”加 深 图 像 时 ， 图 像 的 中 间 调 和 高 光 部 分 不 会 受到 影响 。 
回 ”曝光 度 : 用 于 设置 “加 深 工具 ”涂抹 的 浓度 ， 参 数 设置 得 越 大 ， 加 深 效 果 越 明显 。 
回 ”保护 色调 : 若 勾 选 该 项 ， 则 在 保留 图 像 基 本 色彩 的 前 提 下 进行 加 深 ， 若 取消 勾 选 该 项 ， 则 直接 


降低 图 像 的 明度 。 


单 击 工具 箱 中 的 “ 减 淡 工具 ”按钮 国 , 会 在 界面 上 方 的 选项 栏 中 显示 相应 的 参数 。“ 减 淡 


[ 具 


PE 


与 “加 深 工具 ”选项 栏 中 的 参数 完全 相同 ， 这 里 不 再 蓉 述 ， 如 图 5-38 所 示 。 
入。 回 塌 jpP 色 调 


提示 
在 使 用 “ 减 淡 工 具 ” 时 按 下 Alt 键 , 可 临时 切换 为 “加 深 工具 ”进行 操作 ， 松 开 Alt 键 即 可 重新 切换 为 “ 减 淡 工具 ”。 
使 用 “加 深 工具 ”时 按 下 Alt 键 也 可 临时 切换 到 “ 减 淡 工 具 ” 


/A 


本 实例 主要 制作 一 
美观 时 尚且 创意 感 十 足 的 
音乐 网 站 歌曲 播放 列表 ,其 
中 使 用 “ 减 淡 工具 ”和 “加 
深 工具 ”来 处 理 播放 进度 按 
钮 的 明暗 效果 。 处 理 时 要 注意 正确 设置 “ 范 
围 ”， 否 则 使 用 这 两 个 工具 不 会 有 任何 效果 。 


* 源 文件 : 源 文件 第 5 章 \ 创 意 音乐 网 站 菜单 .psd 
* 操 作 视频 视频 第 5 齐 \| 意 音乐 站 菜单 .mp4 


执行 “文件 " > “新 建 " 命令， 弹出 “新 建 ”对 话 框 ， 创 建 一 张 空白 画布 ， 如 图 5-39 所 示 。 
在 画布 中 创建 一 个 正 圆 选区 ， 新 建 图 层 ， 并 填充 白色 ， 如 图 5-40 所 示 。 再 在 正 圆 中 心 创建 一 个 较 小 
的 选区 ， 按 Delete 键 删除 选区 内 的 图 像 ， 如 图 5-41 所 示 。 


比例 缩小 ， 


用 户 也 信 ， 按 下 Shift+Alt 键 将 选 


然后 删除 选 


可 以 直接 载 入 正 圆 的 选区 ,然后 执行 “这 
区 内 的 图 像 。 


“图 层 样式 " 对 话 框 , 选择 "投影" 选项 , 设置 参数 如 图 5-42 所 示 。 使 用 " 圆 角 甜 形 工具 ” 
创建 一 条 路 径 , 将 其 转换 为 选区 , 新 建 图 层 , 填充 白色 , 如 图 5-43 所 示 。 执行 “选择 ” >“ 修改 " > " 收 
缩 ”命令 ， 将 选区 收缩 5 像素 ， 并 删除 选区 内 的 图 像 ， 如 图 5-44 所 示 。 


寺 
六 
到 
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图 5-43 


》 第 5 章 钢笔 、 文 字 和 网 站 导航 


图 5-44 


打开 “图 层 样式 " 对 话 框 , 选择 “投影 "选项 , 设置 参数 如 图 5-45 所 示 。 设置 完成 后 单 击 " 确 


定 ”按钮 ， 并 擦 除 超出 大 圆 环 的 部 分 ， 如 图 5-46 所 示 。 将 人 物 素材 “素材 \ 第 5 章 \002.png” 拖 入 


设计 文档 中 ， 并 适当 对 其 进行 设置 ， 如 图 5-47 所 示 。 


CE] 
回 合用 全 局 交 


图 5-45 图 5-46 


图 5-47 


使 用 相同 的 方法 ， 制 作 白色 圆 环 外 面 的 另 一 个 较 细 辆 


环 ， 如 图 5-48 所 示 。 使 用 “多 边 形 


套 索 工具 ” 框 选 圆 环 的 左 半 部 分 ， 然 后 为 该 图 层 添加 蒙 版 ， 如 区 


5-49 所 示 。 


图 5-48 


图 5-49 


使 用 前 面 讲解 过 的 方法 制作 圆 环 上 的 按钮 ， 如 图 5-50 所 示 。 使 用 “ 减 淡 工 具 ”， 在 选项 


栏 中 适当 设置 参数 ， 然 后 处 理 出 按钮 的 明暗 效果 ， 如 图 5-51 所 示 。 


在 “字符 ”面板 中 适当 设置 字符 属性 ， 然 后 在 人 物 下 方 输 入 文字 ， 如 图 5-52 所 示 。 在 
“ 圆 角 和 矩形 工具 ”创建 一 条 路 径 ， 转 为 选区 ， 并 填充 任意 色 ， 如 医 


网 环 下 方 新 建 图 层 ， 然 后 使 用 
5-53 所 示 。 


打开 “图 层 样式 ”对 话 框 ， 选 择 “ 图 案 到 加 ”选项 ， 设 置 参 数值 ( 请 载 入 外 部 图 案 素材 “ 星 
.apt”)， 如 图 5-54 所 示 。 设 置 该 图 层 “ 混 合 模式 ”为 “ 柔 光 ”， “填充 ” 为 0% ， 并 擦 除 不 需要 
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Kreme cr 


的 部 分 ， 如 图 5-55 所 示 。 


图 5-50 图 5-51 


2 TT Tr 和 工 


图 5-52 图 5-53 


| EB 


图 5-54 图 5-55 


了 在 画布 中 输入 两 排 文字 ,并 分 别 在 "字符 ”面板 中 修改 字符 属性 , 如 图 5-56 所 示 。 打开 “ 
层 样式 ”对 话 框 ， 选 择 “ 描 边 ” 选 项 ， 设 置 参 数 如 图 5-57 所 示 。 


图 5-56 


继续 在 对 话 框 中 选择 “投影 " 选项, 设置 参数 如 图 5-58 所 示 。 设置 完成 后 单 击 “确定 ” 按钮 ， 
得 到 文字 效果 ， 如 图 5-59 所 示 。 使 用 相同 的 方法 输入 歌 单 文字 ， 并 将 两 个 文字 图 层 编组 为 “文字 ”， 
制作 完成 ， 如 图 5-60 所 示 。 


E 


图 5-58 图 5-59 图 5-60 

下 始 对 菜单 进行 切片 存储 ， 如 图 5-61 所 示 。 按 快捷 键 Ctri+R 显示 标尺 ， 不 断 拖 出 参 
考 线 对 菜单 中 的 各 个 元 素 进行 精确 定位 。 隐 藏 背 景 、 文 字 和 橙色 按钮 ， 使 用 “矩形 选 框 工具 ” 沼 着 
参考 线 框 选 整个 菜单 ， 如 图 5-62 所 示 。 


ci 
| 
志 
图 5-61 图 5-62 
让 
提示 4 | 


\ 如 果 创 建 了 白色 背景 的 文档 ,那么 将 合并 拷贝 的 图 像 粘 贴 到 新 文档 中 后 ， 一定 要 先 隐藏 背景 再 进行 优化 存储 


按 快捷 键 Ctrl+Shift+C 合并 拷贝 选区 内 的 图 像 ， 并 按 快捷 键 CtritN 新 建文 档 ， 新 文档 尺寸 
将 自动 跟踪 选区 大 小 ， 如 图 5-63 所 示 。 

按 快 捷 键 Ctd+N 粘贴 图 像 , 然后 执行 “文件 "> “导出 "> “存储 为 Web 所 用 格式 ( 旧版) 命令 ， 
对 其 进行 优化 ， 如 图 5-64 所 示 。 设 置 完成 后 单 击 对 话 框 下 方 的 “存储 按钮， 对 图 像 进行 存储 ， 丸 
5-65 所 示 。 


图 5-63 图 5-64 图 5-65 
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下) 使 用 相同 的 方法 框 选 并 优化 存储 按钮 ， 如 图 5-66 所 示 。 使 用 相同 的 方法 框 选 并 优化 存储 
文字 ， 如 图 5-67 所 示 。 


a 知识 储备 : 为 什么 有 时 用 “ 减 淡 / 加 深 工具 ”涂抹 图 像 没 有 效果 ? 

答 : 四 将 “曝光 度 ” 设 置 成 了 0%。 

@ "范围 "设置 得 不 对 ,如果 要 加 深 减 淡 阴影 区 域 , 却 将 范围 设置 为 "高光" , 就 不 会 有 任何 效果 。 
人 @@) 如 果 要 加 深 纯 白 色 ， 或 减 淡 纯 黑色 ， 请 取消 勾 选 “保护 色调 ”。 


使 用 钢笔 工具 绘制 精确 的 形状 “5 \ 


在 Photoshop 中 , “钢笔 工 具 ” 能 够 绘制 精度 最 大 的 路 径 ， 因 此 被 频繁 应 用 于 绘制 各 种 不 规则 
的 形状 和 选区 。 在 制作 一 些 较为 复杂 的 作品 时 ， 形 状 和 线条 的 精度 往往 会 直接 影响 最 终 效果 ， 所 以 
熟练 掌握 “钢笔 工具 ”的 操作 技巧 是 很 有 必要 的 。 


和 使 用 钢笔 工具 9 


单 击 工具 箱 中 的 “钢笔 工具 ”按钮 ， 上 方 的 选项 栏 中 会 显示 相应 的 参数 。 “钢笔 工具 ” 与 其 他 
形状 工具 的 选项 参数 大 致 相同 ， 下 面 仅 对 该 工具 特有 的 几 个 参数 进行 介绍 ， 如 图 5-68 所 示 。 


图 5-68 
介 ”橡皮 带 : 单 击 选项 栏 中 的 鲁 按 钮 ， 即 可 打开 “橡皮 带 ” 选 项 。 若 勾 选 该 项 ， 则 在 移动 光标 时 会 
显示 一 条 虚拟 的 路 径 ， 方 便 用 户 在 添加 锚 点 之 前 预先 查看 路 径 形状 。 
名 ”自动 添加 / 删除: 若 勾 选 该 项 ， 使 用 “钢笔 工具 ” 单 击 一 个 锚 点 可 将 其 删除 ， 使 用 “钢笔 工具 ” 
单 击 路 径 ， 可 在 当前 位 置 添 加 新 的 锚 点 。 
下 面 是 使 用 “钢笔 工具 ”绘制 路 径 的 操作 步骤 。 


芭 使 用 “钢笔 工具 ”在 画布 中 单 击 确定 第 1 个 锚 点 。 

静 ) 继续 在 其 他 位 置 单 击 确定 第 2 个 锚 点 ， 不 要 松 开 鼠标 ， 反 复 拖 动 鼠 标 调整 路 径 的 形状 ， 直 
至 获得 满意 的 效果 。 

现 按 下 Al 键 单 击 当前 锚 点 ， 可 以 看 到 路 径 的 去 向 被 删除 了 ， 这 意味 着 原来 的 平滑 点 被 转换 为 
角 点 了 。 

码 继续 添加 其 他 锚 点 ， 直 至 形状 绘制 完成 ， 如 图 5-69 所 示 。 


第 5 章 钢笔 、 文字 和 网 站 导航 | 


实例 28 一 制作 复古 导航 条 © 


本 实例 主要 制作 | 加 gx 
了 一 款 配色 和 样式 都 比 
较 复古 的 网 站 导航 条 ， 
其 中 使 用 “钢笔 工具 " 
绘制 了 导航 两 侧 不 规则 
的 形状 。 制 作 过 程 中 要 注意 精确 对 齐 各 
个 元 素 。 


* 源 文件 : 源 文 件 \ 第 5 章 \ 复 古 导航 条 .psd 
> 操作 视频 : 视频 第 5 章 \ 复 古 导航 条 .mp4 


加 执行 “文件” >“ 新建” 命令， 弹出 “新 建 ”对 话 框 ， 创 建 一 张 空白 画布 ， 如 图 5-70 所 示 。 
使 用 “矩形 工具 ”在 画布 中 创建 一 个 “填充 ”为 #883c15 的 矩形， 如 图 5-71 所 示 。 


图 5-70 图 5-71 


静 打开 “图 层 样式 ”对 话 框 ， 选 择 “ 图 案 友 加 ”选项 ， 设 置 参 数 如 图 5-72 所 示 。 设 置 完成 
后 单 击 “ 确 定 ” 按 钮 ， 可 以 看 到 图 形 中 添加 了 一 些 纹理 ， 如 图 5-73 所 示 。 
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图 5-72 图 5-73 


“钢笔 工具 ”在 和 矩形 下 方 创建 一 个 相同 颜色 的 形状 ， 如 图 5-74 所 示 。 直 接 按 下 At 键 ， 
板 中 将 矩形 的 图 层 样式 拖 动 复制 到 该 形状 ， 如 图 5-75 所 示 。 


新 建 图 层 ， 


图 5-74 图 5-75 


使 用 “钢笔 工具 ”绘制 出 黑色 折 又 部 分 ， 并 修改 其 “不 透明 度 ” 为 50%， 如 图 5-76 所 示 。 


使 用 


黑色 柔 边 画笔 涂抹 出 阴影 ， 并 修改 其 “透明 度 ” 为 33%， 如 图 5-77 所 示 。 


图 5-76 图 5-77 


_ 码 使 用 相同 的 方法 制作 出 另 一 侧 ， 并 将 所 有 图 层 编组 为 “ 底 ”， 如 图 5-78 所 示 。 打开“ 字符 ” 
面板 ， 适 当 设置 字符 属性 ， 然 后 输入 虚线 ( 一 个 减 号 一 个 空格 )， 如 图 5-79 所 示 。 


图 5-78 图 5-79 
三 多 次 复制 虚线 , 并 调整 至 导航 的 其 他 位 置 , 如 图 5-80 所 示 。 打 开 "字符 "面板 , 设置 字符 属性 ， 


然后 在 导航 中 


a 


P 间 输入 文字 ， 如 图 5-81 所 示 。 


图 5-80 图 5-81 


吏 使 用 “ 圆 角 矩形 工具 " 在 文字 下 方 创建 一 个 “填充 " 为 拢 44444 的 圆 角 矩形 , 如 图 5-82 所 示 。 
打开 “图 层 样 式 ” 对 话 框 ， 选 择 “ 内 阴影 ”选项 ， 设 置 参 数 如 图 5-83 所 示 。 


图 5-82 图 5-83 


EB) 继续 在 对 话 框 中 选择 “外 发 光 ” 选 项 ， 设 置 参 数 如 图 5-84 所 示 。 设 置 完成 后 单 击 “ 
按钮 ， 得 到 文本 选中 效果 ， 如 图 5-85 所 示 。 


Ey 
总 


图 5-84 图 5-85 


芭 使 用 相同 的 方法 完成 其 他 部 分 的 制作 ， 并 将 图 层 分 类 编组 ， 如 图 5-86 所 示 。 按 快捷 键 
Ct+R 显示 标尺 ， 然 后 不 断 加 入 参考 线 ， 精 确定 位 导航 中 的 各 个 元 素 ， 如 图 5-87 所 示 。 


主页 关于 我 们 服务 项 目 产品 展示 联系 我 们 


图 5-86 
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图 5-87 


.型 隐藏 背景 和 虚线 ， 使 用 “和 矩形 选 框 工 具 ” 选 择 导航 左 侧 的 部 分 ， 如 图 5-88 所 示 。 按 快捷 
键 Ctl+Shift+C 合并 拷贝 图 像 ， 再 按 快捷 键 Ctri+N 新 建文 档 ， 如 图 5-89 所 示 。 


图 5-88 图 5-89 


于 按 快捷 键 CtritV 粘贴 图 像 , 并 执行 "文件 " > “导出” >“ 存储 为 Web 所 用 格式 ( 旧版 )” 命令 ， 


知 像 进行 优化 存储 ， 如 图 5-90 所 示 。 新 建文 档 ， 粘 贴图 像 ， 使 用 相同 的 方法 优化 存储 图 像 。 使 用 
的 方法 分 片 存储 导航 中 的 其 他 部 分 ， 操 作 完成 ， 如 图 5-91 所 示 。 


次 
pa | 


ol 


相 


ionotprg oprg 


| ”当知 识 储备 : 路 径 绘制 完成 后 还 能 再 修改 吗 ? | 
| 答 : 可 以 。 路 径 绘制 完成 后 ， 用 户 还 可 以 使 用 “直接 选择 工具 ”逐个 选中 每 个 锚 点 ， 通 过 调 | 
， 整 控制 手柄 来 影响 路 径 的 形状 。 此外, 还 可 以 使 用 “路 径 选 择 工 具 " 选中 整 条 路 径 进 行 移动 或 缩放 。， 


路 径 和 选区 都 属于 网 页 设计 中 比较 重要 的 功能 。 在 Photoshop 中 ， 可 以 非常 方便 地 将 二 者 进行 
转换 ， 以 增加 操作 的 灵活 性 。 下 面 是 将 路 径 转 换 为 选区 的 具体 步骤 。 

到 在 画布 中 创建 路 径 。 

吏 使 用 "直接 选择 工具 "“ 路 径 选 择 工具 "或 “钢笔 工具 " 右 击 画 布 ,在 弹出 的 快捷 菜单 中 选择 “ 建 
立 选区 ”命令 ， 在 “建立 选区 ”对 话 框 中 适当 设置 参数 。 

名 单 击 “ 确 定 ” 按 钮 ， 即 可 将 路 径 转换 为 选区 ， 如 图 5-92 所 示 。 


图 5-92 


如 果 转 换 选区 时 要 为 选区 应 用 “羽化 ”选项 ,或 者 要 将 该 选区 与 其 他 选区 进行 计算 ,就 需要 使 用 “建立 选区 ” 
命令 来 转换 ， 否 则 可 直接 使 用 快捷 键 Ctrl+Enter 将 路 径 转换 为 选区 


将 选区 转换 为 路 径 的 操作 也 非常 简单 ， 下 面 是 具体 的 操作 步骤 。 
萝 在 画布 中 创建 选区 。 
吏 按 下 Al 键 , 单 击 “ 路 径 ” 面板 底部 的 “从 选区 生成 工作 路 径 ” 按 钮 图 ， 在 弹出 的 “建立 
工作 路 径 ” 对 话 框 中 设 定 “ 容 差 ” 值 。 
单 击 “确定 ”按钮 ， 邑 可 将 选区 转 履 为 时 笃 ， 如 图 5-93 所 示 。 


pe 
元 


图 5-93 
“建立 工作 路 径 ” 对 话 框 中 的 “ 容 差 ”选项 用 于 控制 所 要 生成 的 路 径 与 选区 的 贴 合 程度 。 参 数 
设置 得 越 小 ， 路 径 与 选区 的 贴 合 程 度 越 高 ， 相 应 生成 的 错 点 也 会 越 多 ， 参 数 设置 得 越 大 ， 得 到 的 路 
径 越 粗 糙 ， 但 会 生成 相对 较 少 的 锚 点 。 


使 用 画笔 描 边 路 径 


因为 “钢笔 工具 ”可 以 绘制 高 精度 的 路 径 ， 所 以 常 被 用 来 创建 复杂 的 选区 。 实 际 上 ， 同 样 可 以 
借用 “钢笔 工具 ”的 这 一 特性 ， 通 过 “用 画笔 描 边 路 径 ” 功 能 来 帮助 绘制 高 精度 的 线条 。 下 面 是 使 
用 画笔 描 边 路 径 的 具体 操作 步骤 。 
加 使 用 “钢笔 工具 ”绘制 路 径 。 
总 按 下 At 键 , 单 击 “路 径 ” 面板 底部 的 “用 画笔 描 边 路 径 ” 按钮 ,打开 “ 描 边 路 径 ” 对话 框 ， 
选择 “工具 ”为 “画笔 ”。 
于 单 击 “确定 ”按钮 ， 即 可 使 用 “画笔 工具 ” 沿 着 路 径 描 边 ( 若 有 需要 ， 可 在 执行 该 操作 之 
前 设置 画笔 )， 如 图 5-94 所 示 。 


图 5-94 


Ps OT TT i 


内， 


工具 : 用 于 设置 描 边 路 径 的 工具 ， 该 下 拉 列 表 中 包括 “铅笔 ”“ 画 笔 ”“ 橡 皮 擦 ” “加深 了 
和 “ 减 淡 工 具 ” 等 。 
模拟 压力 : 勾 选 该 项 ， 可 以 描绘 出 末端 渐 隐 的 线条 效果 。 


六 提示 
用 户 也 可 以 先 使 用 各 种 矢 
Enter 键 即 可 快速 描 边 路 径 


会 图 工具 创建 路 径 ， 并 保持 路 径 被 选中 ， 然 后 转 到 “画笔 工具 ”进行 设置 ， 按 下 


本 实例 主要 制作 一 
款 帅 气 的 游戏 网 站 导航 ， 
这 款 导 航 是 直接 “ 媒 ” 在 
网 页 背景 中 的 ， 所 以 将 
Banner 也 一 并 制作 了 。 在 
制作 过 程 中 ， 使 用 画笔 描 边 路 径 功 能 略微 
强化 了 一 下 导航 边缘 ， 使 其 更 有 质感 。 


> 源 文件 ， 源 文件 第 5 章 \ 帅 气 游戏 网 站 导航 .psd 


* 操作 视频 : 视频 第 5 章 \ 镍 气 游 戏 网 站 导航 .mp4 


执行 “文件 ” >“ 新 建 ”命令 ， 新 建 一 个 空白 文档 ， 如 图 5-95 所 示 。 为 背景 填充 黑色 ， 然 
后 将 纹理 素材 “素材 \ 第 5 章 \004.jpg” 拖 入 文档 正中 央 ， 如 图 5-96 所 示 。 


图 5-95 图 5-96 


使 用 “钢笔 工具 ”在 纹理 上 方 勾画 出 导航 的 轮廓 ， 如 图 5-97 所 示 。 打 开 “ 路 径 ”面板 ， 
双击 该 路 径 缩 览 图 ， 将 其 存储 ( 之 后 会 反复 用 到 它 )， 如 图 5-98 所 示 。 


图 5-97 
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载 入 该 路 径 的 选区 ， 为 纹理 添加 蒙 版 ， 使 用 黑色 柔 边 画笔 沿 着 选区 下 边缘 涂抹 ， 如 图 5-99 
所 示 。 取 消 选 区 ， 继 续 使 用 黑色 和 柔 边 画笔 涂抹 整个 纹理 的 左右 两 侧 ， 如 图 5-100 所 示 。 


选中 刚刚 存储 的 路 径 ， 新 建 图 层 ， 切 换 到 画笔 进行 设置 ， 并 按 Enter 键 描 边 路 径 ， 如 医 
5-101 所 示 。 


图 5-9 


图 5-100 图 5-101 
设置 该 图 层 “ 混 合 模式 ”为 “ 柔 光 ”， 并 为 其 添加 蒙 版 ， 处 理 出 两 端 渐 隐 的 效果 ， 如 医 
5-102 所 示 。 
新 建 图 层 ， “直线 工具 ”分 别 在 导航 条 中 绘制 一 黑 一 白 两 条 直线 ， 如 图 5-103 所 示 。 
为 其 添加 蒙 版 ， 使 用 黑白 径 向 渐变 填充 画布 ， 并 降低 其 “不 透明 度 ” 为 50%， 如 图 5-104 所 示 。 


全 


过 


图 5-102 图 5-103 图 5-104 
使 相同 的 方法 复制 出 其 他 几 条 分 隔 线 , 并 将 它们 编组 , 如 图 5-105 所 示 。 打 开 " 字 符 " 面板 ， 
设置 字符 属性 ， 并 在 分 隔 线 图 层 下 方 输入 文字 ， 如 图 5-106 所 示 。 
es 人 
图 5-105 图 5-106 
打开 “图 层 样式 " 对 话 框 , 选择 "投影" 选项 , 设置 参数 如 图 5-107 所 示 。 设置 完成 后 单 击 " 确 


定 ” 按 钮 ， 得 到 文字 投影 效果 ， 如 医 5- 108 所 示 。 使 用 相同 的 方法 制作 其 他 文字 ， 如 图 5-109 所 示 。 

使 用 前 面 讲解 过 的 方法 ， 分 别 在 导航 上 方 和 白色 文字 下 方 绘制 一 条 渐 隐 的 线条 ， 如 
5-110 所 示 。 在 线条 下 方 新 建 图 层 , 使 用 柔 边 画笔 在 导航 上 涂抹 颜色 #5b106, 然后 设置 其 “混合 模式 ” 
为 “ 亚 加 ”， 如 图 5-111 所 示 。 
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图 5-107 图 5-108 图 5-109 


图 5-111 


使 用 相同 的 方法 为 白色 文字 下 方 添加 发 光 效果 ， 制 作出 被 选中 的 效果 ， 如 图 5-112 所 示 。 
将 外 部 素材 “素材 \ 第 5 章 \005.psd” 拖 入 设计 文档 中 ， 得 到 最 终 导航 效果 如 图 5-113 所 示 。 


图 5-112 图 5-113 
下 面 对 页 面 进行 切片 。 按 快捷 键 Ctt+R 显示 标尺 ， 然 后 拖 出 参考 线 ， 对 页 面 进行 分 割 ， 如 
5-114 所 示 。 关 闭 导航 中 的 发 光 效 果 ， 关 闭 背 景 、 背 景 中 的 按钮 和 不 带 图 层 样式 的 文字 , 使 用 “和 矩 
选 框 工具 ” 框 选 背 景 部 分 ， 如 图 5-115 所 示 。 


图 5-114 图 5-115 
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对 页 面 进 行 切 片 存储 时 ， 如 果 页 面 中 的 文字 是 比较 普通 的 字体 ， 且 没有 任何 特殊 效果 ， 就 不 必 切 出 ， 后 期 制作 
网 页 时 可 以 轻松 实现 。 如 果 文 字 带 有 特殊 效果 ， 如 图 层 样式 和 变形 文字 等 ， 就 需要 单独 切 出 。 


于 执行 “编辑 >“ 合 并 拷贝 ” 命令 ,再 执行 “文件 ”>“ 新 建 ” 命 令 ， 新 文档 的 尺寸 会 自动 
跟踪 选区 的 尺寸 , 如 图 5-116 所 示 。 将 拷贝 的 部 分 粘贴 到 新 文档 ,然后 执行 “文件 ”>“ 导 出 ”>“" 存 
储 为 Web 所 用 格式 ( 旧版 )” 命 令 ， 对 图 像 进 行 优化 存储 ， 如 图 5-117 所 示 。 


图 5-116 图 5-117 


下 优化 完成 后 , 单 击 对 话 框 下 方 的 "存储 " 按钮 , 将 背景 图 像 存储 为 "bg.png”, 如 图 5-118 所 示 。 
继续 对 图 像 进 行 优化 存储 ， 如 图 5-119 所 示 。 


加 


和 知识 储备 : 勾 选 “模拟 压力 ” 措 边 为 什么 没 效果 ? 
| 答 默认 设置 下 , 在 " 描 边 路 径 " 对 话 框 中 勾 选 "模拟 压力 " 选项 后 应 该 得 到 射线 状 的 线条 效果 。， 
， 如 果 仍 然 得 到 两 头 一 样 粗 的 线条 ， 可 在 “画笔 ”面板 的 “形状 动态 ”选项 卡 中 设置 “大 小 拌 动 ” 

| 控制 为 “ 渐 隐 ”。 


使 用 文字 工具 只 


在 Photoshop 中 ， 使 用 文字 工具 可 以 为 设计 作品 添加 文字 内 容 ， 说 明 设 计 主 题 。 文 字 工具 被 | 
泛 应 用 于 网 站 UI 设计 中 ， 在 制作 一 些 较为 复杂 的 作品 时 ， 文 字 的 排版 往往 会 直接 影响 页 面 的 美观 性 ， 
所 以 熟练 掌握 文字 工具 的 操作 是 很 有 必要 的 。 
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全 -办 入 文子 © 


在 Photoshop 中 , 用 户 可 以 使 用 " 横 排 文 字 工具 ”“ 直 排 文 字 工具 ”“ 横 排 文 字 蒙 版 工具 ”和 “ 直 


排 文 字 蒙 版 工具 ”在 文档 中 输入 文字 或 文字 选区 ， 下 面 仅 以 最 常用 的 “ 横 排 文字 工具 ”为 例 讲解 具 
体操 作 步 骤 。 


到 使 用 “ 横 排 文字 工具 ”在 画布 中 单 击 ， 插 入 输入 点 。 
名 输入 需要 的 文字 。 
码 输入 完成 后 单 击 选项 栏 右 侧 的 国 按 钮 ， 提 交 输 入 效果 ， 如 图 5-120 所 示 。 


2 设置 文字 © 


图 5-120 
输入 完成 后 ， 如 果 要 对 部 分 文字 进行 修改 ， 可 直接 使 用 “ 横 排 文 字 工具 ”在 画布 中 拖 动 选中 需 
要 的 文字 ， 重 新 输入 新 的 内 容 ， 然 后 提交 即 可 。 


网 页 中 最 主要 的 元 素 就 是 图 片 和 文字 。 为 了 整个 版 面 的 美观 性 和 协调 性 ， 往 往 需 要 对 页 面 中 的 


文字 进行 各 种 设置 ， 使 其 更 符合 整个 页 面 的 主题 。 通 常 这 些 工作 会 在 “字符 ”面板 中 进行 。 


ee oocoocooce @ GG 


© 


执行 “窗口 ”>“ 字 符 ” 命 令 ， 或 在 任何 文字 工具 的 激活 状态 下 按 快捷 键 Clt+T， 即 可 打开 “ 字 


”面板 ， 如 图 5-121 所 示 。 


字体 系列 ;用 于 设置 当前 文本 的 字体 ， 可 在 下 拉 列 表 中 找到 安装 到 计算 机 上 的 所 有 字体 。 
字体 样式 : 用 于 选择 所 选 字体 系列 的 样式 ， 包 括 “ 常 规 ”“ 粗 体 ”“ 和 斜体 ”和 “ 粗 斜 体 ”等 ， 
具体 选项 会 根据 所 选 字体 系列 的 不 同 而 不 同 。 

字体 大 小 : 用 于 设置 文字 的 大 小 ， 可 直接 在 文本 框 中 输入 具体 的 数值 。 参 数 设置 得 越 大 ， 最 终 
得 到 的 文字 也 越 大 。 

行距 : 用 于 设置 两 行文 字 的 间距 ， 设 置 的 参数 值 越 大 ， 两 行文 字 离 得 越 远 。 

两 字符 字 距 微调 : 用 于 调整 特定 字符 的 间距 , 可 直接 输入 数值 , 或 在 下 拉 列表 中 选择 相应 的 选项 。 
字 距 : 用 于 设置 文字 的 字 距 ， 设 置 的 参数 值 越 大 ， 字 符 之 间 的 距离 越 远 。 

字符 比例 间距 : 使 用 该 选项 可 以 按 固定 的 百分比 减少 字符 周围 的 空白 , 字符 本 身 不 会 发 生变 化 。 
垂直 缩放 /水 平 缩放 : 用 于 对 文字 进行 垂直 方向 或 水 平方 向 的 缩放 ， 从 而 使 文字 变 得 更 瘦 或 更 宽 。 
基线 偏 移 : 该 选项 可 以 实现 文字 基于 基线 上 下 偏 移 位 置 的 效果 。 当 设置 参数 为 正 值 时， 文字 向 
上 偏 移 ， 当 设置 参数 为 负 值 时 ， 文 字 向 下 偏 移 ， 如 图 5-122 所 示 。 

颜色 : 用 于 指定 文字 的 颜色 ， 可 直接 单 击 色 块 ， 在 打开 的 “ 拾 色 器 ”对 话 框 中 选取 颜色 。 

文本 装饰 : 这 8 个 按钮 用 于 为 文字 添加 各 种 装饰 效果 ， 包 括 “ 仿 粗 体 " 国 、“ 仿 斜体" 国 、 
“全 部 大 写字 母 " 国 、“ 小 型 大 写字 母 " 国 、 “上 标 " 国 、“ 下 标 ” 国 、“ 下 画 线 " 国 和 “出 
除 线 " 图 。 

消除 锯齿 : 该 下 拉 列 表 中 提供 了 5 种 字体 平滑 方式 ， 分 别 为 “无 ” “锐利 ”“ 犀 利 ”“ 浑 厚 " 
和 “平滑 ”。 


一 


图 5-121 图 5-122 


默认 情况 下 ，“ 字 体系 列 ” 列 表 中 的 字体 总 是 以 很 小 的 缩 览 图 显示 字体 ， 给 字体 选择 带 来 很 大 的 不 便 。 用 户 可 
以 执行 “文字 ”>“ 字 体 预 览 大 小 ” 命 预览 效果 放大 


* 源 文 件 : 源 文件 第 5 章 \ 时 尚 导 航 菜单 .psd 
* 操作 视频 : 视频 第 5 章 \ 时 尚 导航 菜单 .mp4 


的 圆 角 矩形， 选中 的 
菜单 项 呈现 蓝 色 ， 右 
半 透 明 水 晶 质感 的 搜索 框 。 制 作 

注意 体现 导航 底座 部 分 的 光影 效 
果 ， 还 要 注意 斜纹 纹理 的 制作 。 


J 执行 “文件 ” >“ 新建” 命令 ， 弹 出 “新 建 ”对 话 框 ， 创 建 一 张 1200 x 710 像素 的 空白 画 
5-123 所 示 。 新 建 “ 背 景 ”图 层 组 ， 新 建 一 张 3x3 像素 的 透明 背景 画布 ， 然 后 绘制 出 图 案 ， 
站 执行 “编辑 ”>“ 定 义 图 案 ” 命 令 ， 将 该 图 形 定义 为 “图 案 1”， 如 图 5-125 所 示 。 


和 


未 标题 1 


图 5-124 图 5-125 
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名 新 建 图 层 ,， 执行 “编辑 >“ 填充” 命令， 为 画布 填充 图 案 ， 如 图 5-126 所 示 。 打 开 “ 图 层 ” 
板 ， 将 图 层 “ 不 透明 度 ” 更 改 为 14%， 移 动 图 层 到 “背景 ”图 层 组 内 ， 如 图 5-127 所 示 。 


妥 5-126 图 5-127 

2B 使 用 “ 圆 角 矩 形 工具 ”和 “多 边 形 工具 ”在 画布 中 创建 一 个 “半径 ”为 2 像素 的 路 径 ， 然 
后 将 其 转换 为 选区 ， 新 建 图 层 ， 填 充任 意 色 ， 如 图 5-128 所 示 。 打 开 “ 图 层 样式 ”对 话 框 ， 选 择 “ 描 
边 ” 选 项 ， 设 置 参数 如 图 5-129 所 示 。 


4 5-128 图 5-129 


邓 ) 继续 在 对 话 框 中 选择 "内 发 光 " 和 "渐变 过 加 " 选项 , 设置 参数 如 图 5-130 所 示 。 最 后 选择 " 投 
影 ”选项 ， 设 置 参数 如 图 5-131 所 示 。 


图 5-130 图 5-131 
吗 设置 完成 后 ， 得 到 按钮 效果 ， 如 图 5-132 所 示 。 使 用 “直线 工具 ”在 按钮 上 方 绘制 一 条 | 
色 为 #7dd3ff 的 线条 ， 并 降低 其 “不 透明 度 ” 为 15% ， 如 图 5-133 所 示 。 使 用 相同 的 方法 制作 出 
钮 左 侧 的 分 隔 线 ， 如 图 5-134 所 示 。 


沙 沾 
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图 5-132 图 5-133 图 5-134 
了 打开 “字符 "面板, 设置 字符 属性 ， 然 后 在 按钮 左 侧 输 入 文字 ， 如 图 5-135 所 示 。 打 开 “ 医 
层 样式 ”对 话 框 ， 选 择 “ 投 影 ” 选 项 ， 设 置 参 数 如 图 5-136 所 示 。 设 置 完 成 后 单 击 “ 确 定 ” 按 钮 ， 
得 到 文字 效果 ， 如 图 5-137 所 示 。 


图 5-135 4 5-136 图 5-137 


200 使 用 相同 的 方法 制作 其 他 按钮 和 文字 ， 并 分 别 将 按钮 编组 ， 如 图 5-138 所 示 。 使 用 “ 圆 角 
矩形 工具 ”创建 一 条 路 径 ， 新 建 图 层 ， 将 其 转 为 选区 后 填充 任意 色 ， 如 图 5-139 所 示 。 


对 


图 5-138 图 5-139 


圆 角 和 矩形 创建 完成 后 ， 如 果 要 调整 其 长 度 ,可 使 用 “直接 选择 工具 ”选中 一 排 锚 点 进行 移动 ,不 要 直接 使 用 “ 自 
变换 ”命令 ,这 样 会 对 圆 角 效果 产生 影响 


有 打开 “图 层 样式 ”对 话 框 ， 选 择 “ 渐 变 释 加” 选项， 设置 参数 如 图 5-140 所 示 。 设 置 完成 
后 单 击 “ 确 定 ” 按 钮 ， 得 到 导航 底座 效果 ， 如 图 5-141 所 示 。 载 入 该 图 层 选区 ， 向 下 移动 2 像素 ， 
在 其 下 方 新 建 图 层 ， 填 充 颜色 为 #041604， 如 图 5-142 所 示 。 
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图 5- 


这 里 只 是 为 了 效果 漂亮 为 导航 添加 了 背景 和 纹理 ， 


景 上 画 导 航 。 
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图 5-141 图 5-142 


晶 实 际 应 用 时 ， 背 景 并 不 与 其 中 ， 用 户 可 以 直接 在 白 背 


了) 在 导航 下 方 分 层 绘制 出 投影 效果 ， 如 图 


使 其 颜色 过 渡 更 丰富 ， 并 将 相关 图 层 编组 ， 如 图 5-144 所 示 。 


Ey 


5-143 所 示 。 分 别 在 导航 上 涂抹 几 层 不 同 的 颜色 ， 


图 5-143 


了 0 使 用 相 后 


的 方法 制作 出 菜 辣 


项 被 选中 的 状态 


字符 属性 ， 然 后 在 导航 中 输入 文字 ， 如 图 5- er 


图 5-144 
图 5-145 所 示 。 打 开 “ 字 符 ” 面 板 ， 设 置 


导航 上 的 颜色 过 渡 
然后 使 用 “色相 /饱和 度 ” 


上 E 常 微妙 , 大 部 分 人 无 法 一 次 性 选 对 颜色 。 
命令 重新 调整 颜色 即 可 。 


可 随意 涂抹 比较 艳丽 的 颜色 , 如 蓝 色 、 绿 色 或 红色 ， 


闻 打开 “图 


层 样式 ” 


到 文字 立体 效果 。 使 
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相 后 


对 话 框 ， 选 择 “ 投 影 


”选项 


， 设 置 参数 如 图 5-147 所 示 。 设 置 完成 后 得 


的 方法 制作 其 他 文字 ， 如 


图 


5-148 所 示 。 


图 5-147 图 5-148 


了 现 使 用 前 面 讲解 的 方法 在 导航 右 侧 制作 一 个 圆 角 和 矩形 , 如 图 5-149 所 示 。 使 用 " 圆 角 矩 形 工具 ” 
创建 一 条 路 径 ， 将 其 转换 为 选区 ， 新 建 图 层 ， 为 选区 填充 白色 到 透明 的 线性 渐变 ， 如 图 5-150 所 示 。 


图 5-149 图 5-150 


下 使 用 相同 的 方法 制作 搜索 框 的 其 他 形状 和 文字 效果 , 如 图 5-151 所 示 。 使 用 " 自 定形 状 工具 ” 
创建 一 个 放大 镜 ，“ 填 充 ” 为 #59f267， 如 图 5-152 所 示 。 


Search for 


图 5-151 图 5-152 


在 为 选区 填充 颜色 时 ， 如 果 觉 得 蚂蚁 线 不 利于 查看 效果 ， 可 以 按 快捷 键 Ctl+H 将 选区 隐藏 ( 注意 选区 隐藏 后 依 
然 存在 ， 只 是 不 可 见 而 已 )。 


有 下) 使 用 相同 的 方法 完成 其 他 操作 ， 得 到 最 终 导航 效果 ， 如 图 5-153 所 示 。 现 在 开始 对 导航 进 
行 切 片 输出 ， 按 快捷 键 Ctt+R 显示 标尺 ， 不 断 拖 出 参考 线 ， 对 导航 中 的 各 种 元 素 进 行 精确 定位 ， 如 
5-154 所 示 。 
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图 5-154 
[ 具 ” 框 选 标题 文字 ， 并 按 快捷 键 Ctri+Shift+C 合并 拷贝 该 


域 ， 如 图 


使 用 “矩形 选 框 了 
5-155 所 示 。 

9 按 快捷 键 Ctrl+N 新 建 图 层 ， 可 以 看 到 新 文档 尺寸 会 自动 跟踪 选区 大 小 ， 如 图 5-156 所 示 。 
直接 将 文字 图 层 拖 入 新 文档 ， 并 关闭 背景 。 执 行 “ 文 件 ”> “存储 为 Web 所 用 格式 ( 旧版 )” 命 令 ， 


对 其 进行 优化 存储 ， 如 图 5-157 所 示 。 


蕊 


VWIH PRODUCTION 


图 5-157 


图 5-156 


图 5-155 
观 使 用 “矩形 选 框 工 具 ” 框 选 登录 按钮 ， 并 按 快捷 键 Ctri+Shift+C 合并 拷贝 该 区 域 ， 如 轿 
5-158 所 示 。 
了 新 建文 档 ， 按 快捷 键 CtritV 粘贴 图 像 ， 然 后 将 其 存储 为 Web 所 用 格式 。 使 用 相同 的 方法 优 
化 存储 导航 中 的 其 他 部 分 ， 包 括 各 种 底座 、 分 隔 线 和 文字 等 ， 如 图 5-159 所 示 。 
WI PEODUCTION lL covemsrs Ll | 
VWIH PRODUGLION = 
i or re ee 
WI PRODUCTION 
MYWORES ER mm Yeonh we. oo 
VWIH PRODUCTION ey a 2 
a -一 


答 : “ 横 排 文 字 蒙 版 工具 ”和 “ 直 排 文字 蒙 版 


合 : 


| 5.8 甘 快速 对 齐 对 象 ~ 


大 部 分 的 导航 和 菜单 都 采用 规则 的 形状 来 布局 ， 所 以 一 遍 遍 使 用 对 齐 同类 元 素 的 工具 是 在 所 难 
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免 的 。 可 以 选择 手动 创建 参考 线 ， 或 启用 自动 参考 线 来 辅助 对 齐 ， 但 其 实 还 有 更 方便 、 快 捷 的 方法 。 
学: 吾 对 天 对 象 > 
当选 中 “图 层 ” 面 板 中 的 多 个 图 层 或 组 时 ，“ 移 动工 具 ” 选 项 栏 中 的 对 齐 和 分 布 对 象 按钮 将 全 
部 可 用 ， 帮 助 用 户 以 指定 的 规则 对 齐 和 分 布 对 象 ， 如 图 5-160 所 示 。 
项 对 齐 国 : 单 击 该 按钮 ， 可 将 所 选 定 的 全 部 对 象 对 齐 到 最 顶端 对 象 的 上 边缘 。 
垂直 居中 对 齐 国 : 单 击 该 按钮 ， 可 将 选 定 对 象 对 齐 到 顶端 对 象 上 边缘 和 底 端 对 象 下 边缘 的 中 点 
位 置 。 
底 对 齐 国 : 单 击 该 按钮 ， 可 将 选 定 对 象 对 齐 到 最 底 端 对 象 的 下 边缘 。 
左 对 齐 国 : 单 击 该 按钮 ， 可 将 选 定 对 象 对 齐 到 最 左 侧 对 象 的 左边 缘 。 
水 平 居中 对 齐 国 : 单 击 该 按钮 ， 可 将 选 定 对 象 对 齐 到 左 侧 对 象 左边 缘 和 右 侧 对 象 右边 缘 的 中 点 
位 置 。 
右 对 齐 图 : 单 击 该 按钮 ， 可 将 选 定 对 象 对 齐 到 最 右 侧 对 象 的 右边 缘 。 
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原始 效果 顶 对 齐 垂直 居中 对 齐 


底 对 齐 左 对 齐 水 平 居中 对 齐 右 对 齐 


图 5-160 
El 


上 一 小 节 讲 解 的 对 齐 对 象 主要 用 于 将 多 个 对 象 对 齐 到 某 个 参照 点 ， 本 节 所 讲解 的 分 布 对 象 则 主 
要 用 于 调整 多 个 对 象 之 间 的 间距 。 用 户 可 在 “图 层 ” 面 板 中 选中 多 个 对 象 ， 然 后 使 用 “移动 工具 ” 
选项 栏 中 的 6 个 按钮 对 其 重新 进行 分 布 ， 如 图 5-161 所 示 。 


图 5-161 
按 顶 分 布 : 单 击 该 按钮 ， 可 将 选 定 对 象 以 上 边缘 为 基准 进行 均等 分 布 。 


© 

名 ”垂直 居中 分 布 : 单 击 该 按钮 ， 可 将 选 定 对 象 以 水 平 中 心 为 基准 进行 均等 分 布 。 
名 按 底 分 布 : 单 击 该 按钮 ， 可 将 选 定 对 象 以 下 边缘 为 基准 进行 均等 分 布 。 

加 ” 按 左 分 布 布 : 单 击 该 按钮 ， 可 将 选 定 对 象 以 左边 缘 为 基准 进行 均等 分 布 。 
© 
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水 平 居 中 分 布 : 单 击 该 按钮 ， 可 将 选 定 对 象 以 垂直 中 线 为 基准 进行 均等 分 布 。 
按 右 分 布 : 单 击 该 按钮 ， 可 将 选 定 对 象 以 右边 缘 为 基准 进行 均等 分 布 。 


引 
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垂直 居中 分 布 
按 左 分 布 水 平 居中 分 布 
图 5-161( 续 ) 


实例 31 一 制作 漂亮 的 图 上 : 式 9 航 。 公 ) 


底 分 布 


oo 


按 右 分 布 


本 实例 制作 一 款 闫 观 实 。 grypg 
ea 
非常 简单 ， 绘 制 几 个 不 同 “网 
的 形 居 ， 将 照片 到 时 
就 可 以 了 。 制 作 完 成 后 使 
“分 布 "和 "对 齐 "功能 对 5 张 卡片 进行 对 齐 ， 
上 省力， 精准 美观 。 


喷 酒 加 沾 立 机 


> 源 文件 ， 源 文件 第 5 章 漂 亮 的 图 片 式 导航 .psd 
操作 视频 : 视频 第 5 章 漂 亮 的 图 片 式 导航 . ps 


5-162 所 示 。 将 素材 “素材 \ 第 5 


各 执行 “文件 > “新建 ” 命 令 ， 新 建 一 张 空白 画布 ， 如 


章 \006.png” 拖 入 设计 文档 中 ， 并 适当 调整 其 位 置 和 大 小 ， 如 


5-163 所 示 。 新 建 一 张 3x3 像素 


5-164 所 示 。 


的 透明 背景 文档 ， 在 画布 中 心 创 建 一 个 1x 1 像素 的 黑色 矩形 ， 如 


图 5-162 


区 到 


芭 执行 “编辑 ”> “定义 图 案 ”命令 ， 将 绘制 的 图 形 定义 为 “图 案 1" 


可 设计 文档 中 ， 打 开 “区 


图 5-165 


， 如 图 5-165 所 示 。 返 


层 样式 ” 对 话 框 ， 选 择 “ 医 


让 


图 5-166 


案 释 加 ”选项 ， 设 置 人 参数 如 图 5-166 所 示 。 


到 设置 完成 后 


@ 击 “确定 ”按钮 ， 可 以 看 到 


到 像 上 添加 了 刚刚 定义 的 医 


使 用 “ 猎 形 工具 ”在 画布 左下 角 创 建 一 个 “填充 ”为 #006464 的 矩形 ， 如 医 


3 打开 "图 


刁 样 式 ” 对 


完成 后 得 到 形状 描 边 效果 ， 如 图 5-170 所 示 。 


案 ， 如 医 


5-167 所 示 。 


图 5-168 


5-168 所 示 。 


话 框 ， 选 择 “ 描 边 ” 选 项 ， 并 进行 相应 设置 ， 如 医 


5-169 所 示 。 设 置 


图 5-169 


图 5-170 


三 使 用 相同 的 方法 制作 另 一 个 正 


eT] 


， 如 图 5-171 所 示 。 复 制 “ 图 层 


1” 至 图 层 最 上 方 ， 将 其 


剪 切 至 下 方 的 正 贺 


， 才 


图 5-171 


适当 调整 大 小 ， 如 图 5-172 所 示 。 
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码 ; 打开 “字符 ” 面板, 设置 字符 属性 ， 然 后 在 图 片 下 方 的 标签 中 输入 文字 ， 如 图 5-173 所 示 。 
使 用 相同 的 方法 制作 其 他 4 张 小 卡 片 ， 并 分 别 将 其 编组 ， 如 图 5-174 所 示 。 


Hipster Fashion 
Haircut 


芭 现在 这 5 张 卡片 排列 得 十 分 杂乱 。 选 中 5 个 卡片 组 ， 单 击 “ 移 动工 具 ” 选项 栏 中 的 “水 平 
居中 分 布 ” 按钮 ,使 它们 的 间距 都 相等 ， 如 图 5-175 所 示 。 再 单 击 选项 栏 中 的 “垂直 居中 对 齐 ” 按钮 ， 
将 5 张 卡片 精确 对 齐 ， 至 此 完成 图 片 式 导航 的 制作 ， 如 图 5-176 所 示 。 


葬 按 快捷 键 Ctrl+R 显示 标尺 ， 然 后 拖 出 参考 线 ， 定 义 导航 中 的 元 素 ， 如 图 5-177 所 示 。 隐 茂 
背景 ， 选 择 “ 矩 形 选 框 工具 ”， 沿 着 参考 线 框 选 第 一 张 图 片 ， 如 图 5-178 所 示 。 


图 5-178 
观 按 快 捷 键 Ctrl+Shift+C 合并 拷贝 该 区 域 ， 再 按 快捷 键 Ctd+N 新 建文 档 ， 文 档 的 尺寸 会 自动 


跟踪 选区 大 小 ， 如 图 5-179 所 示 。 按 快捷 键 CtritV 粘贴 图 像 ， 然 后 执行 “文件 ”>“ 导 出 ”>“ 存 储 
为 Web 所 用 格式 ( 旧版 )” 命 令 优化 存储 该 图 片 ， 如 图 5-180 所 示 。 


而 


钢笔 、 文 字 和 网 站 导航 


图 


辐 像 存储 为 “pic01.png” ， 如 区 


0) 设置 完成 后 单 击 


的 方法 存储 其 


a 


“移动 工具 ”选项 栏 中 的 “自动 选择 ”有 什么 作用 ? 
答 : 在 “移动 工具 ”选项 栏 中 勾 选 “自动 选择 ”选项 ， 


当 知识 储备 : 


击 点 的 图 层 或 组 ， 而 无 需 


E 确 选择 对 象 的 概率 很 小 。 


“自动 选择 ”功能 了 


如 果 文档 中 


图 片 是 网 页 中 重要 的 元 
时 间 过 长 的 问题 ， 导 致 用 户 人 


网 站 中 的 图 像 简介 p 


网 页 中 的 图 像 不 仅 有 点 缀 与 装饰 整体 版 面 的 作用 ， 更 承载 着 传达 信息 的 重要 使 命 ， 所 以 在 设计 
辐 片 内 容 时 要 注意 是 否 具有 代表 性 。 

© Web 安全 色 板 : 为 了 使 网 页 图 像 的 颜色 在 显示 器 上 没有 差异 ， 在 设计 时 需要 使 用 到 Web 安全 
色 板 。 
图 片 分 辩 率 : 网 页 图 片 往往 不 要 求 具 有 很 高 的 分 辨 率 ， 标 准 分 辩 率 为 72 像素 \ 英 寸 。 

图 片 优 化 : 图 片 文件 的 大 小 影响 着 图 片 加 载 的 速度 ， 图 片 过 大 会 导致 图 片 加 载 缓慢 ， 因此 创建 
片 时 ， 需 要 对 图 片 进 行 优化 ， 以 减 小 文件 的 大 小 。 


网 站 使 用 的 图 片 格式 p 


适用 于 网 站 的 图 片 格式 主要 有 4 种 , 分 别 为 GIF 格式 、PNG-8 格式 、JPEG 格式 和 PNG-24 格式 。 
GIF 格式 : 适用 于 压缩 、 具 有 单 色 调 颜 色 和 清晰 细节 的 图 像 ， 不 适合 颜色 太 多 的 图 片 ， 是 一 种 
无 损 压 缩 格式 。 
PNG-8 格 式 : 与 GIF 格式 一 样 ， 适 用 于 纯色 图 像 的 压缩 ， 并 不 损失 清晰 的 细节 。 
JPEG 格 式 : 适用 于 压缩 具有 连续 色调 的 图 像 , 虽然 是 有 损 压 缩 , 但 不 会 损失 图 像 中 重要 的 部 分 ， 
会 有 选择 地 减少 数据 ， 以 减 小 文件 体积 。 

PNG-24 格式 : 同样 适用 于 压缩 、 具 有 连续 色调 的 图 像 ， 它 可 以 保留 多 个 透明 度 级 别 ， 但 生成 
的 文件 较 大 。 


网 站 中 的 图 像 模式 p 


常见 的 图 像 颜色 模式 有 RGB、CMYK、HSB 和 Lab 等 ， 网 页 显示 全 部 采用 RGB 模式 。RGB 是 
最 常见 的 一 种 颜色 模式 ， 适 用 于 在 电子 屏幕 中 显示 图 像 。 在 RGB 模式 下 处 理 图 像 较为 方便 ， 而 且 占 
内 存 最 小 ， 可 以 有 效 节省 存储 空间 。 


EH 


oO 


>< 


© 0@0@ 09 


使 用 图 章 工具 为 图 标 添加 效果 ? 


疗 
吉 | 


工具 "和 "图案 图 章 工具 ”, 可 以 快速 去 除 图 像 中 的 缺陷 和 瑕 症 ， 


到 章 工 具 共 有 两 种 ,包括 "仿制 


或 者 为 图 像 添加 各 种 艺术 效果 。 


使 用 仿制 图 章 工 具 去 除 图 像 中 的 水 印 


“仿制 图 章 工 具 ” 可 以 去 除 图 像 中 不 需要 的 部 分 ， 或 者 把 当前 图 像 的 信息 应 用 到 其 他 部 分 。 选 
“仿制 图 章 工具 ”， 按 住 At 键 单 击 图 像 中 纹理 完善 的 区 域 进行 取样 ， 然 后 在 图 像 中 有 瑕 症 的 部 位 
即 可 将 其 去 除 ， 如 图 6-1 所 示 。 


实例 32 一 一 去 除 图 像 中 的 瑕 冯 € 全 


设计 和 制作 网 站 页 面 时 ， 
往往 会 使 用 到 来 自 不 同 途径 的 
图 像素 材 ， 而 这 些 图 像 往往 会 
存在 一 些 瑕 症 和 缺陷 ， 如 水 印 
和 Logo 等 ， 这 时 就 可 以 使 用 
“仿制 图 章 工具 ”对 多 余 的 部 分 进行 修补 。 


* 源 文件 ， 源 文件 第 6 章 \ 去 除 图 像 中 的 瑕 症 .psd 
> 操作 视频 ， 视频 第 6 章 \ 去 除 图 像 中 的 瑕 症 .mp4 


加 执行 “文件 > “打开” 命令， 打开 素材 图 像 “素材 \ 第 6 章 \001jpg”， 如 图 6-2 所 示 。 
选择 “仿制 图 章 工具 ”， 按 住 At 键 在 白色 毛巾 区 域 进行 取样 ， 取 样 后 在 图 像 中 的 文字 区 域 进行 涂抹 ， 
如 图 6-3 所 示 。 


单 击 进行 取样 ， 取 样 后 在 图 像 中 的 多 余 文 字 处 进行 涂抹 ， 


Ea 


I em cr 


如 图 6-4 所 示 。 使 用 相同 方法 完成 其 余 文 字 的 去 除 操作 ， 图 像 中 的 瑕 症 清 除 完成 后 ， 图 像 效 果 如 
图 6-5 所 示 。 


SS 


本 mw 


图 6-4 图 6-5 


天 执行 “文件” >“ 打开 ”命令 ， 打 开 素材 图 像 “素材 \ 第 6 章 \002.png”， 如 图 6-6 所 示 。 
使 用 “和 矩形 选 框 工具 ”在 画布 中 创建 选区 ， 然 后 按 快捷 键 Ctr+J 复制 图 层 ， 如 图 6-7 所 示 。 


图 6-6 图 6-7 


三 将 刚刚 修复 好 的 图 像 拖 入 当前 设计 文档 ， 适 当 调 整 位 置 ， 并 执行 “图 层 ”>“ 创 建 剪 贴 蒙 版 " 
命令 ， 得 到 网 页 的 最 终 效果 ， 如 图 6-8 所 示 。 


包 知识 储备 : 在 使 用 “仿制 图 章 工具 ”时 所 用 到 的 快捷 键 有 哪些 ? 
答 : 按 ] 键 可 以 加 大 笔 刷 尺寸 ， 按 [ 键 可 以 减 小 笔 刷 尺寸 。 按 快捷 键 Shift+] 忆 二 以 增 强 和 的 


,硬度 ， 按 快捷 键 Shiftt[ 键 可 以 减 小 笔触 的 硬度 。 


| 使 用 图 案 图 章 工具 制作 网 六 
图 案 图 章 工具 " 可 以 利用 系统 提供 的 图 案 或 自 定义 的 图 案 为 网 页 绘制 背景 , 既 简 单 整齐 又 美观 。 


134 


ER 


单 击 工具 箱 中 的 “图 案 图 章 工具 ”按钮 ， 可 在 选项 栏 中 进行 设置 。 

加“” 图案 拾 色 器 : 单 击 后 可 在 打开 的 “图 案 ” 拾 色 器 中 选择 相应 的 图 案 。 

人 ”对 齐 : 勾 选 该 选项 ， 在 涂抹 图 案 时 可 保持 图 案 原始 起 点 的 连续 性 ， 即 使 多 次 单 击 鼠 标 再 次 涂抹 
© 


都 不 会 重新 应 用 图 案 ， 如 果 6-9 所 示 。 
印象 派 效果 : 勾 选 该 选项 后 ,涂抹 的 图 案 具有 滕 胱 模糊 的 效果 ， 可 模拟 印象 派 的 效果 ， 如 果 6-9 


所 示 。 


对 齐 效 果 印象 派 效 果 
图 6-9 


修复 网 页 中 的 图 像 p 


修复 图 像 的 工具 有 很 多 ， 包 括 “ 仿 制图 章 工 具 ”“ 污 点 修复 画笔 工具 ”“ 修 复 画 笔 工具 ”和 “ 修 
补 工具 ”等 ， 使 用 这 些 工 具 可 以 轻松 地 去 除 图 像 中 的 污点 和 瑕 竟 。 


使 用 污点 修复 画笔 工具 
“污点 修复 画笔 工具 ”是 使 用 图 像 中 的 样本 像素 进行 绘画 ， 并 将 样本 的 纹理 、 光 照 、 透 明度 和 


阴影 等 与 所 修复 的 像素 匹配 ， 从 而 快速 地 去 除 图 像 中 的 污点 以 及 小 区 域 的 缺陷 。 单 击 “ 污 点 修复 画 
笔 工具 ”， 可 以 在 选项 栏 中 进行 相应 的 设置 。 

思 近似 匹配 : 可 以 使 用 选区 边缘 周围 的 像素 来 查找 要 用 于 选 定 区 域 修补 的 图 像 区 域 。 

加 ”创建 纹理 : 可 以 使 用 选区 内 的 所 有 像素 创建 纹理 来 修复 该 区 域 。 

加 ”内容 识别 : 可 以 使 覆盖 填充 的 区 域 进 行 拼接 与 融合 ， 从 而 达到 无 颖 的 拼接 效果 。 

加 ”对 所 有 图 层 取样 : 可 以 从 所 有 可 见 的 图 层 中 进行 取样 。 


实例 33 一 去 除 脸 部 的 装饰 © 
通过 对 “污点 修 [Oh p> 源 文件 ， 源 文件 \ 第 6 章 \ 去 除 脸 部 的 装饰 .psd 
复 画 笔 工具 ”的 介绍 ， rt 操作 视频 : 视频 \ 第 6 章 \ 去 除 脸 部 的 装饰 .mp4 
相信 大 家 已 经 对 该 工 


具有 了 大 概 的 了 解 ， ”首部 莫 谋 

下 面 通过 一 个 实例 PALACE 
操作 来 看 看 “污点 修复 画笔 工具 ”的 实 
际 应 用 。 

加 执行 “文件 > “新 建 ” 命令， 
创建 一 个 空白 文档 ， 如 图 6-10 所 示 。 
新 建 图 层 ， 使 用 “矩形 选 框 工具 ” 创 
建 选区 ， 并 填充 颜色 为 #d6c3b5， 如 
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贺 


6-11 所 示 。 


未 标题 -1 


图 6-10 图 6-11 


三 使 用 相同 的 方法 完成 相似 内 容 的 制作 , 如 图 6-12 所 示 。 执行 “ 滤 镜 " >“ 杂 色 ” >“ 添 加 杂 色 ” 
命令 ， 弹 出 “添加 杂 色 ”对 话 框 ， 进 行 相应 的 设置 ， 如 图 6-13 所 示 。 


图 6-12 图 6-13 


双 设置 完成 后 单 击 “ 确 定 ” 按 钮 ， 得 到 杂 色 的 效果 ， 如 图 6-14 所 示 。 使 用 相同 的 方法 完成 
相似 内 容 的 制作 ， 如 图 6-15 所 示 。 


图 6-14 图 6-15 


双 执行 "文件 ” >“ 打开 ”命令 ,打开 素材 图 像 “素材 \ 第 6 章 \003jpg”， 如 图 6-16 所 示 。 
使 用 “污点 修复 画笔 工具 ”， 直 接 单 击 需要 去 除 的 部 位 ， 将 其 修复 ， 如 图 6-17 所 示 。 


图 6-16 的 5 
玛 将 该 图 像 拖 入 设计 文档 中 ， 适 当 调整 位 置 ， 并 创建 剪贴 蒙 版 ， 如 图 6-18 所 示 。 使 用 相同 


的 方法 完成 相似 内 容 的 制作 ， 如 图 6-19 所 示 。 


图 6-18 图 6-19 


天 打开 “字符 "面板 ,适当 设置 其 参数 ,如 图 6-20 所 示 。 使 用 文字 工具 在 画布 中 输入 相应 的 文字 ， 
如 图 6-21 所 示 。 


图 6-20 图 6-21 


到 使 用 相同 的 方法 完成 相似 内 容 的 制作 ，“ 字 符 ” 面板 中 的 各 项 参数 如 图 6-22 所 示 。 网 页 
最 终 效 果 如 图 6-23 所 示 。 


六 知识 储备 : “混合 模式 ”中 的 “ 蔡 换 ”模式 有 什么 作用 ? 
答 : 选择 “替换 ”模式 时 ， 可 以 保留 画笔 描 边 的 边缘 处 的 杂 色 、 胶 片 颗粒 和 纹理 。 


> 


“修复 画笔 工具 ”不 仅 可 以 对 图 像 或 图 案 取样 然后 进行 绘画 , 还 可 以 从 被 修饰 区 域 的 周围 取样 ， 
使 用 图 像 或 图 案 中 的 样本 像素 进行 绘画 ， 并 将 样本 的 纹理 、 光 照 、 透 明度 和 阴影 等 与 所 修复 区 域内 
的 像素 进行 匹配 , 使 修复 后 的 图 像 更 自然 。 单 击 “修复 画 笔 工具 ”， 可 以 在 选项 栏 中 进行 相应 的 设置 ， 
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如 图 6-24 所 示 。 


图 6-24 


加 ”取样 : 可 以 在 图 像 的 像素 上 取样 。 
加 ”图案 : 可 以 在 “图 案 ” 下 拉 列 表 中 选择 图 案 作为 样本 。 


使 用 内 容 感知 移动 工具 


“内 容 感知 移动 工具 ”可 以 移动 图 像 中 某 区 域 像素 的 位 置 ， 并 在 原 像 素 的 区 域 自动 填充 周围 的 
图 像 。 单 击 “ 内 容 感知 移动 工具 ”， 可 以 在 选项 栏 中 进行 相应 的 设置 ， 如 图 6-25 所 示 。 


图 6-25 
@@ ”模式 : 该 下 拉 列 表 中 包含 两 个 选项 ， 分 别 为 “移动 ”和 “扩展 ”。 
@@。 移动 : 在 图 像 中 创建 将 要 移动 的 选区 后 ， 移 动 选区 的 位 置 ， 那 么 原来 选区 的 位 置 将 会 填充 附近 
的 图 像 。 
名 “扩展 : 移动 选区 中 的 图 像 ， 并 且 原 来 选区 内 的 图 像 不 会 改变 。 
@@ ”适应 : 该 下 拉 列 表 中 包含 5 个 选项 ， 是 用 来 表示 图 像 与 背景 的 融合 程度 ， 每 个 选项 表示 不 同 的 
融合 程度 ， 如 图 6-26 所 示 。 
Mg 
A 
| ] 、 | 
(wi) (i (Pm (« 
\ War bi \ War Ld 
原 图 使 用 “内 容 感 知 移动 工具 ”移动 选区 
a 
才 ) \ Wh A 
(a ( i (Wi ( 从 
ar r \wuer)\ 本 
原 图 使 用 “内 容 感 知 移动 工具 ”扩展 选区 


图 6-26 


.6.6 大 自动 调整 图 像 颜色 5 


自动 调整 命令 可 以 对 图 像 颜色 进行 自动 调整 ， 既 方便 又 快速 。 这 些 命令 包括 “自动 色调 ”“ 自 
动 对 比 度 ” 和 “自动 颜色 ”等 。 
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执行 “图 像 ”> “自动 色调 ”命令 ， 可 以 自动 调整 图 像 的 整体 色调 ， 非 常 适 合 校正 发 灰 、 没 有 亮 
丽 感 的 图 像 。 
执行 该 命令 后 ， 图 像 中 最 深 的 颜色 被 映射 为 黑色 ， 最 浅 的 颜色 被 映射 为 白色 ， 然 后 再 按 比例 重 


新 分 布 其 他 颜色 的 像素 ， 从 而 大 幅 提 高 图 像 的 对 比 度 ， 如 图 6-27 所 示 。 


“自动 对 比 度 ” 命 令 可 以 自动 调整 图 像 的 对 比 度 ， 使 图 像 中 暗 的 地 方 更 暗 ， 亮 的 地 方 更 亮 。 通 
常 是 对 一 些 颜 色 没有 鲜明 对 比 的 图 像 进行 校准 ， 如 图 6-28 所 示 。 


图 6-28 


“自动 对 比 度 ” 命令 只 能 调整 对 比 度 , 不 能 单独 调整 颜色 通道 , 所 以 色调 不 会 改变 , 可 以 改进 彩色 图 像 的 对 比 度 ， 
但 无 法 移 除 图 像 中 的 偏 色 。 


色 校正 图 像 颜 色 巧 
执行 “自动 颜色 ”命令 ， 可 以 自动 调整 图 像 的 对 比 度 和 色彩 ， 使 偏 色 的 图 像 得 到 校正 。 图 6-29 
所 示 分 别 为 一 张 图 像 应 用 “自动 颜色 ”命令 的 前 后 对 比 效果 。 


Ey 


图 6-29 


139 


自 定义 调整 图 像 色彩 p 


自 定义 调整 命令 主要 用 于 对 图 像 的 基本 色调 进行 调整 , 主要 包含 “曲线 ”“ 色 阶 ”“ 亮 度 / 对 比 度 ” 
和 “色相 /饱和 度 ” 命 令 等 。 合 理 使 用 这 些 命令 可 以 调整 出 个 性 的 色彩 ， 使 图 像 更 具有 表现 力 。 


I 使 用 “曲线 ”调整 命令 人 @ 


“曲线 ”命令 可 以 调整 图 像 的 色彩 与 色调 ， 它 与 “ 色 阶 ”命令 的 功能 相似 ， 都 是 用 来 调整 明暗 
度 与 反差 。 
“曲线 ”命令 可 以 在 图 像 的 整个 色调 范围 内 最 多 调整 16 个 点 ， 来 调整 不 同 范围 的 色调 明暗 度 ， 
从 而 精确 校准 图 像 的 明暗 状况 。 执 行 “ 图 像 ”>“ 调 整 ” >“ 曲线” 命令 ， 即 可 打开 “曲线 ”对 话 杠 
调整 曲线 形状 ， 如 图 6-30 所 示 。 


图 6-30 

回 ” 预 设 : 在 该 下 拉 列 表 中 包含 一 些 预 设 选项 。 选择 其 中 任意 选项 后 , 则 会 使 用 预 设 参数 来 调整 图 像 。 

当选 项 为 “默认 值 ”时 ， 可 通过 拖 动 曲线 来 调整 图 像 。 
回 ”通道 : 当 图 像 的 “颜色 模式 ”为 RGB 时 ， 在 该 模式 下 可 以 调整 RGB 复合 通道 和 红 、 绿 、 蓝 3 
个 颜色 通道 ， 当 图 像 的 “颜色 模式 ”为 CMYK 时 ， 则 可 以 调整 CMYK 复合 通道 和 青色 、 洋 红 、 
黄色 、 黑 色 4 个 颜色 通道 。 
编辑 点 以 修改 曲线 : 选择 该 按钮 ， 可 以 在 曲线 上 添加 新 的 控制 点 ， 并 拖 动 曲线 来 改变 图 像 的 
色调 。 
绘制 修改 曲线 : 选择 该 按钮 ， 可 以 自由 绘制 曲线 来 调整 图 像 的 色调 。 绘 制 后 ， 可 单 击 “ 编 辑 点 
以 修改 曲线 ”按钮 ， 则 会 显示 曲线 的 控制 点 。 
阴影 / 中 间 调 /高 光 : 在 曲线 的 上 下 两 端 有 两 个 控制 点 ， 拖 动 左下 方 控制 点 可 调整 图 像 的 是 
域 ， 拖 动 右上 方 的 控制 点 可 调整 白色 区 域 ， 而 拖 动 曲线 中 间 的 控制 点 可 调整 中 间 色 调 。 
选项 : 单 击 该 按钮 后 , 会 弹出 “自动 颜色 校正 选项 ”对 话 框 。 该 选项 用 于 控制 “ 色 阶 ”和 “曲线 
中 的 “自动 颜色 ” “自动 色 调 ” “自动 对 比 度 ” 和 “自动 ”选项 应 用 的 色调 和 颜色 校正 。 可 以 
指定 阴影 和 高 光 的 百分比 ， 并 为 阴影 、 中 间 色 调和 高 光 指 定 颜色 值 。 


实例 34 一 一 使 网 页 更 加 鲜艳 后) 


线 的 强大 之 处 是 可 以 非常 精确 地 控制 图 像 的 色调 ， 可 以 调整 一 定 色 调 
的 像素 ， 而 不 影响 其 他 的 像素 。 


独 


© ©@ ©@ 9 
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-一 < 站 > 


加 执行 “文件 ” >“ 打开 ”命令 ， 打 | ， 源 文件 ， 源 文 作 第 6 章 使 网 页 更 加 鲜 相 ped 
开 素 材 图 像 “ 素 材 \ 第 6 章 \003jpg”， 如 图 | ,操作 视频 : 视频 第 6 章 使 网 页 更 加 鲜艳 mp4 
6-31 所 示 。 新 建 图 层 ， 使 “矩形 选 框 工具 ， 
创建 一 个 和 矩形 选区 ， 并 填充 任意 颜色 ， 如 医 
6-32 所 示 。 


图 6-31 图 6-32 


三 将 素材 图 像 “素材 \ 第 6 章 \004jpg” 拖 入 设计 文档 中 ， 适当 调整 位 置 和 大 小 ， 并 创建 剪贴 
蒙 版 ， 如 图 6-33 所 示 。 单 击 “ 图 层 ” 面 板 下 方 的 “创建 新 的 填充 或 调整 图 层 ” 按 钮 ， 选 择 “ 曲 线 ” 
选项 ， 如 图 6-34 所 示 。 
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图 6-33 图 6-34 


了 在 打开 的 “属性 ”面板 中 进行 适当 调整 ， 如 图 6-35 所 示 。 使 用 相同 的 方法 新 建 “亮度 /对 
比 度 ” 调 整 图 层 ， 在 “属性 ”面板 中 设置 参数 值 ， 如 图 6-36 所 示 。 

万 使 用 "矩形 工具 " 在 画布 中 创建 一 个 黑色 的 矩形 , 如 图 6-37 所 示 。 修改 该 图 层 的 “不 透明 度 ” 
为 50%， 并 使 用 相同 方法 完成 相似 内 容 的 制作 ， 如 图 6-38 所 示 。 

了 打开 “字符 ” 面板， 进行 相应 的 设置 ， 如 图 6-39 所 示 。 使 用 “ 横 排 文 字 工 具 ” 在 画布 中 
输入 相应 的 文字 ， 如 图 6-40 所 示 。 使 用 相同 的 方法 完成 相似 内 容 的 制作 ， 如 图 6-41 所 示 。 


PT 


图 6-35 


图 6-37 图 6-38 


| 


图 6-39 图 6-40 


图 6-41 


>》 世人 人 与 人 化 四 人 
和 知识 储备 : 曲线 调整 的 原理 是 什么 ? 
| 答 : 在 曲线” 对话 框 中 ， 有 两 个 渐变 色 条 ， 水 平 的 渐变 颜色 为 输入 色 阶 ， 它 代表 了 原始 值 
的 强度 ， 生 直 的 渐变 颜色 为 输出 色 阶 ， 它 代表 了 调整 后 的 像素 强度 信 。 


整个 色 阶 范围 为 0 ~ 255，0 代表 全 黑 ，255 代表 全 白 ， 因 此 色 阶 值 越 高 ， 色 调 越 亮 。 


使 用 色 阶 提高 图 像 清晰 度 Dp 
色 阶 可 以 用 来 调整 图 像 的 阴影 、 中 间 调和 高 光 的 强度 级 别 ， 从 而 调整 色调 的 范围 或 色彩 平衡 。 


执行 "图像 ”> “调整 ” >“ 色 阶 ” 命令 , 打开 “ 色 阶 ”对 话 框 , 并 对 直方 图 进行 调整 ， 如 图 6-42 所 示 。 


上 


~ on 


输入 色 阶 : 通过 拖 动 滑 块 来 调整 图 像 的 阴影 、 中 间 调 和 高 光 ， 也 可 在 滑 块 下 方 的 文本 框 中 输入 
相应 的 数值 进行 调整 。 

输出 色 阶 : 通过 拖 动 滑 块 来 限定 图 像 的 亮度 范围 ， 同样 也 可 在 滑 块 下 方 的 文本 框 中 输入 数值 来 
调整 图 像 的 亮度 。 
自动 : 可 以 通过 单 击 该 按钮 而 快速 进行 颜色 自动 校正 ， 使 图 像 的 亮度 分 布 更 加 均匀 。 

设置 黑 场 : 使 用 该 工具 单 击 图 像 ， 被 单 击 点 的 像素 会 变 为 黑色 ， 而 且 比 单 击 点 像素 暗 的 像素 也 
会 变 为 黑色 。 
设置 白 场 : 使 用 该 工具 单 击 图 像 ， 被 单 击 点 的 像素 会 变 为 白色 ， 而 且 比 单 击 点 亮度 值 大 的 像素 
也 会 变 为 白色 。 
设置 灰 场 : 使 用 该 工具 单 击 图 像 ， 可 根据 单 击 点 的 亮度 来 调整 其 他 中 间 点 的 平均 亮度 。 


使 用 “亮度 /对 比 度 ” 调 整 图 像 ” 龟 


使 用 “亮度 / 对 比 度 ”命令 可 以 调整 图 像 的 亮度 和 对 比 度 ， 和 “ 色 阶 ”与 “曲线 ”命令 相 比 ， 
该 命令 使 用 起 来 更 加 简单 、 快 捷 。 

执行 “图 像 ” >“ 调整 ”>“ 亮 度 / 对比度 ”命令 , 打开 “亮度 / 对比度 ”对 话 框 ， 可 拖 动 滑 块 
来 调整 “亮度 " 与 对比度”, 也 可 以 通过 在 其 对 应 的 文本 框 内 输入 数值 , 来 调整 图 像 的 “亮度 " 和 “对 
比 度 ”， 如 图 6-43 所 示 。 
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图 6-43 


实例 35 一 一 使 图 像 更 清晰 


亮度 和 对 比 度 的 值 为 正 
时 ,图 像 的 亮度 和 对 比 度 增 加 ; 
亮度 和 对 比 度 的 值 为 负 时 ， 
像 的 亮度 和 对 比 度 降 低 ; 当 值 


都 为 0 时 ， 图 像 的 亮度 和 对 比 一 一 四 和 
度 不 发 生变 化 。 9 


> 源 文件 ， 源 文件 第 6 章 \ 使 图 像 更 清晰 .psd 
Pp 操作 视频 :视频 第 6 章 \ 使 图 像 更 清晰 .mp4 


FP Faith Circle 


吏 执行 “文件” > “新建 "命令 ， 新建 一 个 空白 文档 ， 如 图 6-44 所 示 。 使 用 “渐变 工具 ”为 
画布 填充 由 #9deefe 到 #fffff 的 线性 渐变 ， 如 图 6-45 所 示 。 


未 标题 1 


图 6-44 图 6-45 


总 新 建 图 层 ， 使 用 “矩形 选 框 工具 ”在 画布 中 创建 一 个 矩形 选区 ， 如 图 6-46 所 示 。 使 用 “ 渐 
变 工 具 ” 为 选区 填充 由 故 7f7f7 到 白色 的 线性 渐变 ， 如 图 6-47 所 示 。 


一 


图 6-46 图 6-47 
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名 打开 "图 层 样式 " 对 话 框 , 选择 " 描 边 " 选项 , 设置 参数 如 恬 
”按钮 ， 并 按 快捷 键 Ctt+D 取消 选区 ， 如 图 6-49 所 示 。 


图 6-48 


图 6-49 


码 多 次 复制 该 图 层 ， 并 分 别 调整 它们 的 位 置 ， 如 图 6-50 所 示 。 执行 “ 


打开 


素材 图 像 “素材 \ 第 6 章 \007jpg”， 如 图 6-51 所 示 。 


6-48 所 示 。 设置 完成 后 , 单 击 " 确 


图 6-50 


图 6-51 


三 单 击 "面板 " 图 层 下 方 的 “创建 新 的 填充 或 调整 图 层 " 按钮 , 在 "属性 " 面板 中 进行 相应 的 调整， 


6-52 所 示 。 设 置 完成 后 关闭 “属性 ”面板 ， 可 以 看 到 图 像 变 得 更 加 明艳 了 ， 如 图 6-53 所 示 。 


图 6-52 


图 6-53 


到 打开 “图 层 " 面板 , 可 以 看 到 “亮度 /对 比 度 1” 的 图 层 


， 如 图 6-54 所 示 。 将 所 有 图 层 合并 ， 


并 将 该 素材 拖 入 设计 文档 中 ， 适 当 调整 位 置 和 大 小 ， 如 图 6-55 所 示 。 


到 选中 “图 层 1 副本 7” 图 层 ， 按 住 Ctrl 键 的 同时 单 击 图 层 缩 览 图 ， 载 入 “图 层 1” 选 区 ， 为 
该 图 层 添加 图 层 蒙 版 ， 如 图 6-56 所 示 。 使 用 相同 的 方法 完成 相似 内 容 的 制作 ， 如 到 6-57 所 示 。 

码 使 用 “ 横 排 文 字 工具 ”在 画布 中 输入 相应 的 文字 ， 如 图 6-58 所 示 。 使 用 相同 的 方法 完成 
相似 内 容 的 制作 ， 如 图 6-59 所 示 。 
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OR re cr 


图 6-54 图 6-55 


图 6-56 图 6-57 


Faith Circle 


+ Faith Circle 


图 6-59 


a 知识 储备 : 曲线 调整 与 色 阶 调整 有 什么 区 别 ? 
答 : 曲线 上 最 多 可 以 有 16 个 控制 点 ， 可 以 把 整个 色调 范围 分 为 15 段 来 调整 ， 对 色调 控制 非 
常 精确 ， 而 色 阶 只 有 3 个 滑 块 来 调整 色 阶 ， 所 以 曲线 比 色 阶 功能 更 强大 。 


使 用 “色相 / 饱和 度 ” 调 整 图 像 


使 用 “色相 /饱和 度 ”命令 不 仅 可 以 调整 图 像 的 
“色相 ”和 “饱和 度 ”， 还 可 以 调整 图 像 的 明暗 度 ， 
是 一 个 功能 强大 的 颜色 调整 工具 。 执行 “图 像 ”>" 调 
整 ”>“ 色 相 / 饱 和 度 ” 命令 ， 打 开 “ 色 相 / 饱 和 度 ” 
对 话 框 ， 在 其 中 可 进行 调整 ， 如 图 6-60 所 示 。 
加 ”编辑 范围 : 在 该 下 拉 列 表 中 , 包含 多 种 颜色 选项 。 
可 选择 要 调整 的 单个 颜色 ， 只 对 图 像 中 的 该 颜 
色 应 用 调整 。 默 认 选 项 为 “全 图 ”， 表 示 调 整 

图 层 中 的 所 有 颜色 。 
色相 : 拖 动 滑 块 可 改变 图 像 的 颜色 。 


图 6-60 
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饱和 度 : 拖 动 滑 块 可 改变 图 像 的 饱和 度 ， 向 右 拖 动 可 增加 图 像 的 饱和 度 ， 向 左 拖 动 则 减少 图 像 
的 饱和 度 。 

明度 : 拖 动 滑 块 可 改变 图 像 的 明暗 度 ， 向 右 拖 动 可 
着 色 : 勾 选 该 项 时 , 图 像 将 会 变 为 只 有 一 种 颜色 的 和 


到 像 亮度 ， 向 左 拖 动 则 减少 亮度 。 
辐 像 , 并 可 以 拖 动 滑 块 来 调整 图 像 的 颜色 ， 


区 旦 


oO 


如 图 6-61 所 示 。 


图 6-61 


瑟瑟 3 人 直 用 “自然 饱和 度 ” 调 整 图 像 S 


“自然 饱和 度 ” 命 令 用 于 调整 图 像 色 彩 的 饱和 度 ， 它 的 优点 是 在 增加 饱和 度 的 同时 ， 会 防止 过 


于 饱和 而 溢 色 。 执 行 “ 图 像 ” >“ 调 整 ”>“ 自 然 饱和 度 ” 命 令 ， 弹 出 “自然 饱和 度 ” 对 话 框 ， 对 其 
进行 相应 的 设置 ， 如 图 6-62 所 示 。 


| 可 pA 


图 6-62 


提 ”自然 饱和 度 : 拖 动 该 选项 的 滑 块 时 ， 可 以 更 多 地 调整 图 像 中 不 饱和 的 颜色 区 域 ， 并 在 颜色 接近 
完全 饱和 时 避免 颜色 修剪 。 
加 ”饱和 度 : 拖 动 该 选项 的 滑 块 时 ， 可 以 将 图 像 中 所 有 的 颜色 调整 为 相同 的 饱和 度 。 


使 用 “自然 饱和 度 ” 命 令 调整 人 物 时 ， 要 使 调整 后 的 人 物 呈 现 自然 的 色彩 ， 防 止 肤色 过 度 饱和 


实例 36 一 一 制作 酷 炫 图 片 


通过 “色相 / 饱和 度 ”命令 可 以 方便 地 更 改 医 
到 像 进行 调 色 处 理 时 经 常会 用 到 该 命令 。 


Kz) 


PE 


执行 “文件 ” >“ 打开" 命令 ， 
打开 素材 图 像 "素材 \ 第 6 章 \013. 
”， 如 图 6-63 所 示 。 使 用 “和 矩形 
工具 ”在 画布 中 创建 一 个 矩形 选 Black sakura 
按 快捷 键 Ctd+J 复制 图 层 ， 效 果 
到 6-64 所 示 。 


* 源 文件 : 源 文 件 第 6 章 \ 制 作 酷 炫 图 片 .psd 
* 操作 视频 : 视频 \ 第 6 章 \ 制 作 酷 炫 图 片 .mp4 


他 风 嵌 责 
大 


上 . J 


Ne 
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Black Sakura Sakura 


图 6-63 图 6-64 


六 打开 素材 图 像 “素材 \ 第 6 章 \014.jpg”， 将 其 拖 入 设计 文档 中 ， 如 图 6-65 所 示 。 单 击 “ 医 
层 ” 面 板 下 方 的 “创建 新 的 填充 或 调整 图 层 ” 按 钮 ， 选 择 “ 色 相 / 饱 和 度 ” 选 项 ， 并 在 “属性 ”面板 
中 进行 调整 ， 如 图 6-66 所 示 。 


图 6-65 图 6-66 


司 选 中 该 素材 图 层 ， 执 行 “ 图 层 ”> “创建 剪贴 蒙 版 ”命令 ， 并 按 快捷 键 Cl+T， 适当 调整 医 
片 大 小 ， 如 图 6-67 所 示 。 使 用 相同 的 方法 完成 相似 内 容 的 制作 ， 如 图 6-68 所 示 。 


Black Sakura 


图 6-67 图 6-68 


第 6 章 调整 命令 与 优化 图 像 


码 打开 素材 图 像 “ 素 材 \ 第 6 章 \ 017. png”， 将 其 拖 入 设计 文档 中 ， 适 当 调整 位 置 ， 如 
到 6-69 所 示 。 复 制 该 图 层 ， 执 行 “ 编 辑 ”>“ 变 换 ”>“ 水 平 翻转 ”命令 ,将 该 图 片 拖 动 到 相应 位 置 ， 
如 图 6-70 所 示 。 得 到 网 页 的 最 终 效 果 图 ， 如 图 6-71 所 示 。 


Black Sakura 


图 6-69 图 6-70 
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图 6-71 


a 知识 储备 : “图 像 调 整 工具 ”按钮 有 什么 作用 ? | 
答 : 使 用 该 工具 后 ， 光 标 在 图 像 中 变 为 吸管 工具 ， 单 击 图 像 并 拖 动 鼠标 ， 向 左 拖 动 可 以 减少 ， 
| 单 击 点 像素 颜色 范围 的 饱和 度 ， 向 右 拖 动 则 可 增加 单 击 点 像素 颜色 范围 的 饱和 度 。 | 


“阴影 / 高 光 ” 命 令 不 是 简单 地 使 图 像 调 亮 或 调 暗 ， 而 是 根据 阴影 或 高 光 的 局 部 相 邻 像素 来 校 
正 每 个 像素 ， 可 以 轻松 改变 图 像 的 对 比 度 ， 同 时 保持 图 像 的 整体 平衡 。 
执行 “图 像 ”>“ 调 整 ” >“ 阴 影 /高 光 ” 命 令 ， 弹 出 “阴影 /高 光 ” 对 话 框 ， 可 进行 相应 的 调整 ， 
如 图 6-72 所 示 。 
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日 “阴影 ”选项 区 


“数量 ”选项 用 于 调整 阴影 区 域 明暗 度 的 强 弱 ， 值 越 大 图 像 的 阴影 区 域 越 亮 ， 值 越 小 则 阴影 区 
域 越 暗 。 

“色调 ”可 控制 色调 修改 的 范围 ， 值 越 大 则 调整 的 阴影 的 区 域 越 大 ， 值 越 小 则 调整 的 阴影 的 区 
域 越 小 。 

“半径 ”可 调整 每 个 像素 周围 的 局 部 相 邻 像素 的 大 小 ， 相 邻 像素 用 于 确定 像素 是 在 阴影 中 还 是 
在 高 光 中 。 


昌 “高 光 ” 选 项 区 

“数量 ”选项 用 于 调整 高 光 区 域 明暗 度 的 强 弱 ， 值 越 高 则 高 光 区 域 越 暗 。 

“色调 ”可 控制 色调 的 修改 范围 ， 值 越 大 则 调整 的 高 光 的 区 域 越 大 ， 值 越 小 则 调整 的 高 光 的 
域 越 小 。 

“半径 ”可 调整 每 个 像素 周围 的 局 部 相 邻 像素 的 大 小 。 
加 “调整 ”选项 区 

“颜色 ”选项 可 以 调整 已 被 更 改 区 域 的 颜色 。 例 如 当 “ 阴 影 ”选项 区 的 “数量 ” 值 增 大 时 ， 图 
像 中 的 阴影 会 变 亮 ， 再 增加 “颜色 校正 ” 值 后 ， 会 使 这 些 颜 色 更 加 鲜艳 。 

“中 间 调 ”选项 可 以 调整 中 间 调 颜色 的 对 比 度 ， 向 右 拖 动 滑 块 则 会 增加 饱和 度 ， 向 左 则 减少 和 
和 度 。 


内 


oO 


单 击 “ 存 储 默认 值 ”按钮 ,可 以 将 当前 的 参数 设置 存储 为 预 设 , 下 次 打开 该 对 话 框 时 , 会 自动 显示 该 参数 设置 
按 住 Shift 键 ， 该 按钮 会 变 为 “复位 默认 值 ”按钮 ， 单 击 该 按钮 ， 可 将 参数 恢复 为 默认 设置 


实例 37 一 “修正 逆光 的 图 片 © 


ee Se [Oh 》 源 文件 ， 源 文件 第 6 章 \ 修 正 逆 光 的 图 片 .psd 
a * 操作 视频 :视频 \ 第 6 章 \ 修 正 逆光 的 图 片 .mp4 
别 亮 的 区 域 调 暗 ， 特别 暗 的 区 域 调 回 
亮 ， 然 后 相应 调整 图 像 对 比 度 ， 二 
图 片 更 自然。 Rs 
We el 
2 


到 执行 文件 " > "新 建 " 命令 , 新 建 一 个 空白 文档 , 为 背景 填充 颜色 #e7e7e7, 如 图 6-73 所 示 。 

三 新 建 图 层 ， 使 用 “和 矩形 选 框 工具 ”在 画布 中 创建 一 个 矩形 选区 ， 如 图 6-74 所 示 。 使 用 “ 渐 
变 工具 ”为 选区 填充 由 #e1e1e1 到 #bdbdbd 的 渐变 ， 如 图 6-75 所 示 。 

了 打开 素材 图 像素 材 \ 第 6 章 \020jpg”， 并 拖 入 设计 文档 中 ， 如 图 6-76 所 示 。 执行 “图 
像 ”>“ 调 整 ” >“ 阴影 /高光 ”命令 ， 打 开 对 话 框 ， 在 其 中 进行 相应 设置 ， 如 图 6-77 所 示 。 设 置 完 
成 后 单 击 “ 确 定 ” 按 钮 ， 得 到 调整 后 的 效果 ， 如 图 6-78 所 示 。 
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图 6-75 


图 6-76 图 6-77 图 6-78 


码 打开 素材 图 像 "素材 \ 第 6 章 \ 021jpg”， 并 拖 入 设计 文档 中 ， 如 图 6-79 所 示 。 执 行 “ 编 
辑 ”>“ 变 换 ”> “扭曲 ”命令 ， 将 图 片 调整 至 屏幕 形状 ， 如 图 6-80 所 示 。 


= 
一 


图 6-79 图 6-80 
2 亲生 ， 使 用 “直线 工具 ”创建 一 条 黑色 直线 ， 如 图 6-81 所 示 。 使 用 相同 的 方法 创建 
另 直线 ， 并 修改 图 层 的 “不 透明 度 ” 为 20% ， 如 图 6-82 所 示 。 
图 6-81 图 6-82 


到 打开 “字符 " 面板， 进行 相应 设置 ， 如 图 6-83 所 示 。 使 用 “ 横 排 文字 工具 ”在 画布 中 输 
入 相应 文字 ， 如 图 6-84 所 示 。 使 用 相同 的 方法 完成 相似 内 容 的 制作 ， 如 图 6-85 所 示 。 

一 复制 “图 层 3” 图 层 ， 将 其 等 比例 缩小 ， 移 到 适当 位 置 ， 载 入 选区 ， 为 其 填充 为 白色 ， 如 
图 6-86 所 示 。 使 用 “多 边 形 套 索 工具 ”创建 选区 ， 并 按 Delete 键 删除 选区 内 的 像素 ， 得 到 图 像 的 


最 终 效果 ， 如 图 6-87 所 示 。 
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图 6-84 图 6-85 


OTHER SCREENS 


图 6-86 图 6-87 


| 和 a 知识 储备 : “阴影 /高 光 ” 对 话 框 中 的 “修剪 黑色 ”与 “ 修 募 白色 ”有 什么 作用 ? | 
| 答 : “修剪 黑色 ”与 “修剪 白色 ”可 以 将 图 像 中 的 阴影 和 高 光 剪 切 到 新 的 纯 黑 阴影 和 纯 白 高 | 
| 光 的 颜色 ， 该 值 越 高 ， 图 像 对 比 度 越 强 。 | 


6.8 医 使 用 填充 和 调整 图 层 2 


使 用 填充 图 层 可 为 图 像 快速 添加 纯色 、 渐 变色 和 图 案 ， 并 会 自动 建立 新 的 填充 图 层 ， 还 可 将 其 
反复 编辑 或 删除 ， 不 会 影响 到 原始 图 像 品 质 。 调 整 图 层 可 将 颜色 和 色调 调整 应 像 。 使 用 填充 
图 层 和 调整 图 层 ， 不 会 对 图 像 产 生 实 质 的 破坏 ， 默 认 情况 下 ， 填 充 图 层 和 调整 图 层 带 有 图 层 蒙 版 。 


纯色 填充 图 层 ， 是 在 所 选 图 层 上 方 建立 新 的 颜色 填充 图 层 ， 该 图 层 不 会 影响 其 他 图 层 和 整个 区 
像 的 品质 。 
单 击 “ 图 层 
选项 , 并 在 弹出 的 “ 拾 色 器 ”对 话 框 中 选择 颜色 , 会 在 “ 


”面板 底部 的 “创建 新 的 填充 或 调整 图 层 " 按钮， 在 弹出 的 下 拉 菜 单 中 选择 “纯色 ” 
] 板 中 生成 填充 图 层 , 如 图 6-88 所 示 。 


吊 
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渐变 填充 图 层 人 


渐变 填充 图 层 与 纯色 填充 图 层 用 法 相似 ， 渐 变 填充 也 会 自动 建立 一 个 渐变 色 图 层 ， 并 且 可 以 对 
渐变 的 颜色 、 角 度 、 不 透明 度 和 缩放 等 选项 反复 进行 设置 。 
单 击 “图 层 " 面板 底部 的 “创建 新 的 填充 或 调整 图 层 " 按钮 , 在 弹出 的 下 拉 菜单 中 选择 “渐变 填充 ” 
选项 ， 会 弹出 如 图 6-89 所 示 的 对 话 框 。 


图 6-89 
在 “渐变 填充 ”对 话 框 中 设置 完成 后 , 单 击 “ 确 定 ” 按钮 ，“ 图 层 ” 面板 中 会 出 现 与 之 对 应 的 “ 渐 


变 填充 1” 图 层 ， 如 图 6-90 所 示 。 


图 6-90 


图 案 填 充 图 层 可 以 为 图 像 添 加 图 案 或 纹理 ， 系 统 为 用 户 提供 了 大 量 的 
并 且 可 以 通过 图 层 “ 混 合 模式 ”与 “不 透明 度 ”等 来 调整 图 


图 案 , 也 可 以 自 定义 图 案 ， 
到 6-91 所 示 。 


四 @TDDe 


实例 38 一 一 制作 炫 彩 网 页 © 


填充 图 层 使 创作 更 加 灵活 ， 既 保存 了 完整 的 图 像 ， 又 能 使 图 像 更 加 鲜 活 、 亮 丽 ， 
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下 面 通过 一 个 实例 来 掌握 填充 图 层 的 应 用 方法 和 技巧 。 


* 源 文件 ， 源 文件 第 6 章 \ 制 作 炫 彩 网 页 .psd 
* 操作 视频 : 视频 \ 第 6 章 \ 制 作 炫 彩 网 页 .mp4 


JD 执行 "文件 >“ 新建” 命令， 新 建 一 个 空白 文档 ， 如 图 6-92 所 示 。 打 开 素 材 图 像 “ 素 材 
\ 第 6 章 \022jpg”， 将 其 拖 入 设计 文档 中 ， 适 当 调整 位 置 ， 如 图 6-93 所 示 。 


木 标题 1 


图 6-92 图 6-93 
有 新 建 图 层 , 使 “矩形 选 框 工具 " 配合 “钢笔 工具 ”创建 出 选区 ， 如 图 6-94 所 示 。 执行 “ 医 
层 ”>“ 新 建 填充 图 层 ”> “纯色 ”命令 ， 在 弹出 的 “ 拾 色 器 ”对 话 框 中 设置 颜色 为 #e92000， 如 
6-95 所 示 。 
打开 “图 层 " 
妈 6-96 所 示 。 


板 ， 修改 “颜色 填充 2 副本 2” 图 层 的 “混合 模式 ”为 “ 变 暗 ”， 如 


图 6-94 图 6-95 图 6-96 
驻 打开 “字符 ”面板 ， 进 行 相 应 的 设置 ， 如 图 6-97 所 示 。 选 择 “ 横 排 文 字 蒙 版 工具 ”， 在 
画布 中 输入 相应 文字 ， 如 图 6-98 所 示 。 
BB dA 时 单 击 文字 图 层 缩 览 图 ， 载 入 “文字 ”选区 ， 将 文字 图 层 删 除 ， 使 用 “ 拢 
形 选 框 ， 按 住 At 键 拖 动 鼠标 减 去 选区 ， 如 图 6-99 所 示 。 
= 辐 层 蒙 版 , 并 为 选区 填充 为 黑色 ,如 图 6-100 所 示 。 打 开 "* 图 
如 图 6-101 所 示 。 


[A 


板 ,可 以 看 到 蒙 版 效果 ， 


汕 


ER 


图 6-97 


图 6-100 图 6-101 


到 打开 “字符 ” 面板， 进行 相应 设置 ， 如 图 6-102 所 示 。 使 用 “ 横 排 文字 工具 ”在 画布 中 输 
入 相应 文字 ， 使 用 相同 的 方法 完成 相似 内 容 的 制作 ， 如 图 6-103 所 示 。 


当知 识 储备 : 怎样 为 图 像 的 局 部 区 域 填充 ? 
答 : 首先 使 用 “ 套 索 工具 ”或 “钢笔 工具 ”在 局 部 区 域 绘制 选区 ， 然 后 单 击 “建新 的 汗 充 - 
,或 调整 图 层 ”按钮 ， 进 行 选择 填充 。 | 


调整 面板 0 


执行 “窗口 ”>“ 调 整 ”命令 ， 
打开 “调整 ”面板 ， 单 击 该 面板 中 相 
应 的 调整 图 层 按 钮 ， 即 可 添加 该 调整 
下层 ， 并 在 弹出 的 “属性 ”面板 中 进 
行 相应 的 设置 ， 如 图 6-104 所 示 。 
回调 整 图 层 按钮 : 单 击 面板 中 的 相 

应 按钮 , 可 添加 相应 的 调整 图 层 ， 
并 在 打开 的 “属性 ”面板 中 进行 
调整 。 图 6-104 


rm cr 


@ ”前 切 到 图 层 : 所 添加 的 调整 图 层 会 对 所 有 的 图 层 起 到 作用 ， 单 击 该 按钮 后 ， 调 整 图 层 会 剪 切 至 
下 方 图 层 ， 不 会 影响 到 其 他 图 层 。 

© 查看 上 一 状态 : 单 击 该 按钮 或 按 住 快捷 键 ， 即 可 查看 上 一 次 调整 的 参数 ， 松 开 按 钮 便 恢复 当前 
设置 状态 。 

回复 位 到 调整 默认 值 : 若 多 次 设置 当前 状态 ， 该 按钮 会 起 到 复位 至 上 一 状态 的 作用 。 若 是 第 一 次 
设置 当前 状态 ， 或 对 其 他 图 层 进行 过 选择 或 操作 ， 该 按钮 会 起 到 位 到 调整 默认 值 的 乍 用 。 

@ “切换 图 层 可 见 性 : 单 击 该 按钮 可 切换 当前 调整 图 层 的 可 见 性 ， 显 示 或 隐藏 当 前 调整 图 层 。 

回 ”删除 此 调整 图 层 : 单 击 该 按钮 可 删除 当前 的 调整 图 层 。 


另外 ,还 可 以 在 “图 层 " 面 板 底 
即 可 创建 调整 图 层 ， 或 单 击 面 


部 单 击 “ 创 建新 的 填充 或 调整 图 层 "按钮 ,在 弹出 的 下 拉 菜 单 中 选择 相应 的 调整 选项 ， 
扳 底 部 的 “删除 图 层 ” 按 钮 删除 调整 图 层 


实例 39 一 一 制作 黑白 色 图 像 
内 行 "区 
>“ 新 建 调 


> 源 文 件 ， 源 文件 \ 第 6 章 \ 制 作 黑 白色 图 像 .psd 
操作 视频 :视频 第 6 章 \ 制 作 黑 白色 图 像 .mp4 


图 层 ” 命 令 ， 
在 子 菜单 中 选择 
ER. 的 调整 命 
bb 可 创建 调整 图 层 。 通 过 下 
实例 的 学 习 ， 来 更 加 灵活 地 运 


用 调整 图 层 。 


和 贡 风 并 


加 执行 "文件 > "打开" 命令 , 打开 素材 图 像 “素材 \ 第 6 章 \023jpg”， 如 图 6-105 所 示 。 
新 建 图 层 ， 使 用 “矩形 选 框 工具 ”创建 选区 , 填充 任意 颜色 ， 按 快捷 键 Ctri+T 适当 调整 角度 及 位 置 ， 
如 图 6-106 所 示 。 


图 6-105 图 6-106 
了 使 用 相同 的 方法 完成 相似 内 容 的 制作 ， 如 图 6-107 所 示 。 打 开 素 材 图 像 “素材 \ 第 6 章 \ 
024jpg”， 将 其 拖 入 设计 文档 中 ， 适 当 调整 位 置 和 大 小 ， 如 图 6-108 所 示 。 
到 打开 “图 层 " 面板 ， 单 击 面板 底部 的 “创建 新 的 填充 或 调整 图 层 ” 按 钮 ， 选 
在 弹出 的 “属性” 面板 中 进行 相应 调整 , 如 图 6-109 所 示 。 将 该 图 层 剪 切 至 下 方 图 层 , 人 
如 图 6-110 所 示 。 


黑白 ”选项 ， 
其 嵌入 方 格 中 ， 


站 


156 


图 6-107 


图 6-108 


第 6 章 调整 命令 与 优化 图 像 


图 6-109 


图 6-110 


双 使 用 相同 的 方法 完成 相似 内 容 的 制作 ， 如 图 6-111 所 示 。 新 建 图 层 ， 使 


"矩形 选 框 工 


具 ” 在 画布 中 创建 选区 并 填充 黑色 ， 如 
6-113 所 示 。 


网 


6-112 所 示 。 打 开 “ 字 符 ” 面 板 ， 进 行 相 


应 的 设置 ， 如 图 


图 6-111 图 6-112 


习 6-113 


码 使 用 " 横 排 文字 工具 ”在 画布 中 输入 相应 的 文字 ， 如 区 


相似 内 容 的 制作 ， 如 图 6-115 所 示 。 


ITY €0STS 


图 6-115 


相同 的 方法 完成 


刁 区 "hotoshop cc ms U ixi+e 和 (第 2 皮 ) AR 


当知 识 储备 : 调整 图 层 与 执行 “图 像 ”> “调整 ”命令 有 什么 区 别 ? | 
答 调整 图 层 可 以 随时 修改 参数 , 而 "图像"> “调整 "菜单 中 的 命令 一 旦 应 用 , 将 文档 关闭 以 后 ，| 


| 医 人 就 不 能 恢复 了 。 


[RE 锐 化 提高 图 像 清晰 度 D , 


“ 锐 化 工具 ”可 以 将 图 像 进行 锐 化 处 理 , 通过 增强 像素 间 的 对 比 度 ， 从 而 提高 图 像 的 清晰 度 。 
击 ns 按钮 ， 在 选项 栏 中 进行 相应 的 设置 ， 涂 抹 图 像 即 可 。 也 可 执行 “ 滤 镜 ”> “ 锐 
化 ”命令 ， 在 “ 锐 化 " 子 菜单 中 包含 5 种 滤 镜 ， 可 使 图 像 变 得 清晰 ， 如 图 6-116 所 示 。 


二 
低 


SN 


图 6-116 
[6.10 症 [ 你 理 扫描 图 信 >》 | 
若 要 处 理 扫描 图 像 ， 需 执行 “文件 ” >“ 自动 ” >“ 裁剪 并 拉 直 照片 ”命令 ， 进 行 裁剪 操作 ， 
Photoshop CC 会 自动 将 各 张 照片 裁剪 为 单独 文件 ， 非 常 方便 快捷 。 
| 6.11 医 批 处 理 图 像 9) | 
“ 批 处 理 ” 命 令 是 指 将 指定 的 动作 应 用 于 所 有 的 目标 文件 ， 从 而 实现 了 图 像 处 理 的 自动 化 ， 可 
以 简化 对 图 像 的 处 理 流程 ， 执 行 “ 文 件 ”>“ 自 动 ”>“ 批 处 理 ” 命 令 ， 弹出“ 批 处 理 ” 对 话 框 ， 并 
进行 相应 的 设置 ， 如 图 6-117 所 示 。 


图 6-117 


ER 


加 ”播放 : 用 来 设置 播放 的 组 合 动作 组 。 

回 源 在 该 下 拉 列表 中 可 以 选择 需要 进行 批 处 理 的 文件 来 源 , 分 别 是 "文件 来“ 导入 ”打开 文件 夹 ” 
和 Bridge。 

回 ”目标 : 用 来 指定 文件 要 存储 的 位 置 ， 在 该 下 拉 列 表 中 可 选择 “无 ” “存储 并 关闭 ”和 “文件 夹 ” 


来 设置 文件 的 存储 方式 。 


党 使 用 动作 面板 全 


执行 “ 窗 


播放 、 编 辑 和 


放 选 定 的 动作 ”按钮 ， 即 可 播放 该 动作 。 


人 @ ”切换 对 话 开 / 关 : 如 果 记录 命令 前 显示 该 标志 ， 表 示 执 行动 作 过 程 中 
会 暂停 ， 并 打开 相应 的 对 话 框 ， 这 时 可 修改 记录 命令 的 参数 ， 单 击 “ 确 


定 ” 按钮 


”> ' 动 作 " 命令 ,打开 "动作 
除 各 个 动作 ， 如 图 6-118 所 示 。 选择 一 个 动作 后 , 单 击 “ 播 


板 ， 该 面板 可 以 记录 、 


后 才能 继续 执行 后 面 的 动作 。 


开始 记录 按钮 : 用 于 创建 一 个 新 的 动作 ， 处 于 记录 状态 时 ， 该 按钮 为 


红色 。 


© 


播放 选 定 动作 按钮 :选择 一 个 动作 ， 单 击 该 按钮 可 播放 该 动作 。 


图 6-118 


创建 动作 首先 要 新 建 一 个 动作 组 ， 单 击 “ 创 建新 组 ”按钮 ， 弹 出 “新 建 组 ”对 话 框 ， 在 “名 称 ” 


文本 框 中 输入 动作 组 的 名 称 ， 单 击 “ 确 定 ”按钮 。 
单 击 “创建 新 动作 " 按钮 ,弹出 


录 ” 按钮， 并 开始 进行 录制 ， 如 图 6-119 所 示 。 


上 “新建 动 作 ” 对 话 框 , 在 该 对 话 框 中 进行 相应 的 设置 , 然后 单 击 " 记 


图 6-119 


实例 40 一 批 处 理 图 像 D 


执行 “ 批 处 理 ” 命 令 进行 批 处 
理 时 ， 可 按 Esc 键 终 止 该 命令 ， 
用 户 也 可 以 将 “ 批 处 理 ” 命 令 记 录 
到 动作 中 ， 这 样 能 将 多 个 程序 合 到 


一 个 动作 中 ， 
动作 。 


芭 在 进行 “ 批 处 理 ” 前 ， 将 图 像 存储 到 一 个 


从 而 一 次 性 执行 多 个 


文件 夹 中 ,如 


如 图 6-121 所 示 。 


6-120 所 示 。 执行 “窗口 ”>“ 动 作 ” 
命令 ， 打 开 “ 动 作 ” 面板， 选择 “渐变 映射 ”命令 ， 


* 源 文件 ， 源 文件 第 6 章 \ 批 处 理 图 像 
上 操作 视频 : 视频 \ 第 6 章 \ 批 处 理 图 像 mp4 


【ER | 
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国 Eee CC 网 站 山 设计 全 程 揭秘 (第 2 版 ) 


加 执行 文件” >“ 
动 "> " 批 处 理 " 命令 ,弹出 " 批 
处 理 ” 对 话 框 ， 单 击 “ 选 择 " 
按钮 ， 打开“ 浏览 文件 夹 ” 
对 话 框 ， 选 择 图 像 所 在 的 文 
件 夹 ， 如 图 6-122 所 示 。 


计 赤 胃 ， 衣 EX 二 


ET 


图 6-122 


了 继续 在 “目标 ”下 
拉 列 表 中 选择 “文件 夹 ” 选 0 
项 ， 并 单 击 “ 选 择 ” 按 钮 ， | = 
弹出 “浏览 文件 夹 ” 对 话 框 ， 
如 图 6-123 所 示 。 


到 设置 完成 后 单 
“确定 ”按钮 ， 即 可 对 指 
定 的 文件 进行 操作 ， 如 医 
6-124 所 示 。 


图 6-124 


枉 处 理 过 程 中 会 弹出 “保存 为 ”对 话 框 ， 如 图 6-125 所 示 。 处 理 后 的 文件 会 保存 在 指定 的 目 
标 文件 夹 中 ， 如 图 6-126 所 示 。 
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® ® "ET Er | 


司 最 近 访 问 的 位 置 
码 OneDrive 


EL 
[2 
癌 图 上 
习 文 机 
文件 名 (N): 027jpg 
保存 类 型 (T): | JPEG ("JPG;*JPEG;*JPE] 


ICC 配置 文件 (C): 
sRGB IEC61966-2.1 


图 6-125 
ed pr yx™) 
PY "| 
GO te 网 站 Ul 没 计 光盘 ， 源 文件 & 束 村 ， 笋 5 全 洒 文件 ， 到 未 理 加 像 四 四 | 攻 2 本 内 
文件 (和 [和 下 看 (V) Im 各 助 (H) 
组 织 ” 也 会 到 库 中 > 共享 放 允 幻灯 片 新 建文 件 交 
让 和 em 
和 
本 点 本 
是 ;访问 的 位 轩 
避 OneDrive 
罚 库 
[= 视 须 
图 片 027jpg 028jpg 
自 文档 
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用 一 酝 计算 机 
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| 6 sorrwarE (0y 
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者 OoTeNOJEAPBX21 | 
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图 6-126 
当知 识 储备 : 如 何 处 理 没 有 存在 文件 夹 中 的 图 像 ? 
答 : 可 以 先 将 需要 调整 的 图 像 在 Photoshop CC 中 打开 , 然后 执行 “ 批 处 理 ” 命 令 , 在 “ 批 处 理 ” 


对 话 框 中 的 “ 源 ” 下 拉 列 表 中 选择 “已 打开 的 文件 ” 即 可 。 


EC 各 计 网 站 中 的 广告 条 “人 


网 站 广告 条 的 类 型 5 
目前 网 站 页 面 中 最 常见 的 广告 条 有 动态 广告 条 和 静态 广告 条 这 两 种 类 型 ， 两 种 广告 条 的 区 别 具 
体 如 下 。 
回 ”动态 广告 条 : 在 浏览 网 页 的 过 程 中 ， 闪烁 的 图 案 能 够 瞬间 刺激 记忆 ， 容 易 引 起 注意 ， 但 这 种 记 
忆 往往 是 压迫 性 的 ， 久 而 久之 容易 产生 负面 效应 ， 从 而 模糊 记忆 。 
回 ”静态 广告 条 : 如 果 有 良好 的 界面 引导 和 内 容 ， 稳 定 的 画面 可 产 4 
但 不 易 引 发 特殊 的 关注 。 


广告 条 的 常见 尺寸 p 


大 部 分 网 页 都 会 放置 一 些 广告 条 ， 广 告 条 设计 是 一 项 十 分 精确 的 工作 ， 所 以 对 尺寸 要 求 也 十 分 
88x 31 像素 : 该 尺寸 主 可 页 链接 或 网 站 的 小 型 Logo。 
120 x 60 像素 : 该 尺寸 主 网 站 Logoo 
120 x 90 像素 : 该 尺寸 应 用 于 产品 演示 或 大 型 Logo。 
120 x 120 像素 : 该 尺寸 适用 于 产品 或 新 闻 照 片 展示 。 
125 x 125 像素 : 该 尺寸 适用 于 表现 照片 效果 的 图 像 广告 。 
234 x 60 像素 : 该 尺寸 适用 于 框架 或 左右 形式 主页 的 广告 链接 。 
392 x72 像素 : 该 尺 ~ 有 较 多 图 片 展示 的 广告 条 ， 用 于 页 眉 或 页 脚 。 
468 x 60 像素 : 应 用 最 为 广泛 的 广告 条 尺寸 ， 用 于 页 眉 或 页 脚 。 


十 


性 的 记忆 ， 从 而 持久 和 牢固 ， 


ooocoocoocoocoo 


半 H 


并 不 受 上 面 介绍 的 8 种 尺寸 的 限制 ， 这 
的 内 容 和 排版 再 行 决定 


[a 


| 


由 于 现在 网 页 设计 的 多 样 性 ， 广 告 条 的 设计 尺 - 
| 些 尺寸 仅 供 参考 。 用 户 在 设计 广告 条 时 ， 具 体 的 尺寸 还 是 


和合 


根据 网 站 


7.3 顾 如 何 设计 好 的 广告 条 p | 


当今 社会 ， 广 告 条 已 成 为 互联 网 产品 的 一 大 推广 平台 。 好 的 广告 条 能 够 吸引 顾客 的 注意 ， 如 何 
设计 一 个 好 的 广告 条 就 成 为 一 个 值得 探讨 、 研 究 的 问题 。 总 体 来 说 ， 一 个 设计 成 功 的 广告 条 具有 以 


: 广告 条 的 广告 语 读 起 来 要 朗朗 上 口 ， 文 字 要 尽量 简单 ， 通 俗 易 懂 ， 用 一 两 句 话 就 可 


清楚 表达 所 说 的 内 容 。 字 符 样 式 最 好 使 用 黑体 等 比较 粗 的 字体 ， 否 则 容易 被 用 户 忽略 ， 注 意 


ee 
图 形 简单 : 
色 较 复杂 的 


的 其 他 内 容 所 吸引 。 
图 形 不 要 太 复杂 ， 尽 量 选择 颜色 数 少 ， 并 且 能 够 表达 清楚 问题 的 图 形 。 如 果 选 择 颜 


图 形 ， 就 要 提前 考虑 一 下 如 果 在 颜色 数 少 的 情况 下 ， 会 不 会 产生 明显 的 噪点 。 


尽量 不 要 使 用 彩虹 色 、 旱 边 等 复杂 的 特殊 图 形 效果 , 否则 会 增加 图 形 所 占据 的 颜色 数 , 增 大 体积 。 
名 ”体积 小 : 为 避免 对 下 载 速度 产生 影响 , 广告 条 所 占 的 空间 应 尽 可 能 小 。 如 468x 60 像素 的 广告 条 ， 
最 好 是 15KB 左右 ， 不 要 超过 22KB。 而 88 x 31 像素 的 广告 条 最 好 控制 在 5KB 左右 ， 不 要 超过 


7KB。 


7.4 万 完美 抠 图 合成 广告 条 p 


“ 抠 图 ” 


是 合成 网 页 广告 条 常用 的 一 项 操作 ， 想 要 准确 地 从 图 像 中 提取 自己 需要 的 部 分 ， 就 需 


要 抠 图 ， 很 多 优秀 广告 条 的 制作 都 需要 抠 图 合成 。 


在 Photoshop CC 中 有 很 多 工具 可 以 帮助 用 户 完成 这 项 操作 ， 如 果 想 要 提取 的 对 象 边缘 比较 清晰 
且 与 背景 颜色 有 明显 的 对 比 ， 就 可 以 使 用 “磁性 套 索 工具 ”。 

选择 “磁性 套 索 工具 ”， 将 鼠标 沿 着 图 像 中 想 要 提取 的 对 象 边 缘 移动 ， 光 标 经 过 的 地 方 将 会 有 
许多 的 锚 点 来 连接 选区 。 如 果 想 要 闭合 路 径 ， 只 要 将 光标 移 至 起 点 处 单 击 即 可 ， 如 图 7-1 所 示 。 


图 7-1 


实例 41 一 一 制作 果盘 广告 条 


使 用 


打开 素材 文件 
jpg ， 


通过 上 面 的 讲 
解 ， 我 们 已 经 知道 
“磁性 套 索 工 
具 ” 可 以 将 图 像 中 
想 要 的 部 分 载 入 选 
区 , 然后 就 可 


后 就 可 以 单独 对 其 进行 处 理 了 。 
加 执行 "文件 "> "打开 "命令 ， 
“素材 \ 第 7 章 \001. 


上 源 文件 ， 源 文件 第 7 章 \ 果 盘 广告 条 .psd 
上 操作 视频 : 视频 第 7 章 \ 果 盘 广告 条 .mp4 


“磁性 套 索 工具 ” 


如 图 


7-3 所 示 。 


如 图 7-2 所 示 。 打 开 素 材 文 
件 “ 素 材 \ 第 7 章 \002jpg”， 使 用 


沿 着 果盘 绘制 选区 ， Le coin des gourmands 
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Le coin des gourmands 
图 7-2 图 7-3 
一) 在 选项 栏 中 选择 “从 选区 减 去 ”选项 ， 继 续 在 选区 内 绘制 选区 ， 如 图 7-4 所 示 。 将 选区 内 
的 图 像 直 接 拖 入 设计 文档 中 ， 并 适当 调整 其 位 置 和 大 小 ， 如 图 7-5 所 示 。 


CETTES JEUX-CONCOURS 
TCONSELS GOURMANDS ! 


| Le coin des gourman 
图 7-4 图 7-5 
三 执行 “图 层 ”>“ 新 建 调整 图 层 ”>“ 曲 线 ” 命 令 ， 在 弹出 的 “属性 ”面板 中 设置 人 参数， 如 
7-6 所 示 。 新 建 图 层 , 载 入 “图 层 1" 的 选区 , 使 用 白色 柔 边 画 笔 适当 涂抹 果盘 下 方 , 如 图 7-7 所 示 。 


de 


SALADES 


RECETIES /EUX-CONCOURS 


ET GONSELS GOURMANDS 1 


图 7-7 


钮 知识 储备 : 如 何 用 其 他 方法 插入 图 片 ? | 
答 可 以 直接 将 素材 文件 拖 入 设计 文档 中 , 然后 在 拖 入 的 图 像 中 绘制 选区 , 为 其 添加 图 层 蒙 版 。; 


记名 快速 选择 工具 © 


“快速 选择 工具 ”也 是 一 个 创建 选区 比较 快捷 的 工具 ， 利 用 调整 画笔 的 大 小 ， 在 想 要 抠 取 的 对 
象 中 拖 动 鼠 标 就 可 以 快速 创建 选区 ， 选 区 会 随 着 鼠标 的 移动 自动 查找 想 要 提取 的 图 像 边 缘 。 在 绘制 
选区 时 可 能 会 出 现 误差 ， 这 时 就 需要 适当 调整 选区 了 。 


分) 
实例 和 2 一 一 制作 美食 广告 条 


该 工具 抠 图 ， 然 后 合成 一 幅 美 


* 源 文件 : 源 文件 第 7 章 \ 美 食 广告 条 .psd 
上 操作 视频 : 视频 第 7 章 \ 美 食 广告 条 .mp4 


贡 执行 “文件 > “打开 ” 命令， 打开 素材 文件 “素材 \ 第 7 章 \003jpg”， 如 图 7-8 所 示 。 


从 当 
到 


素材 文件 “素材 \ 第 7 章 \ 004jpg”， 选 择 “ 快 速 选择 工具 ”， 将 鼠标 在 盘 内 移动 以 绘制 选区 ， 
7-9 所 示 。 


8 一 


图 7-8 图 7-9 


三 使 用 “移动 工具 ”将 选区 内 的 图 像 拖 入 设计 文档 中 ， 并 适当 调整 其 位 置 和 大 小 ， 如 图 7-10 


所 示 。 在 图 像素 材 图 层 下 方 新 建 图 层 ， 设 置 前 景色 为 #jb0000， 使 用 “画笔 工具 ”绘制 阴影 ， 如 图 


7-11 所 示 。 


图 7-11 


芭 双击 该 图 层 缩 览 图 


， 在 “图 像样 式 ”对 话 框 中 选择 “投影 ”选项 ， 并 进行 相应 设置 ， 如 医 


7-12 所 示 。 设 置 完成 后 单 击 


“确定 ”按钮 ， 得 到 图 像 效 果 ， 如 图 7-13 所 示 。 
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图 7-12 图 7-13 | 
I 单 击 “ 图 层 ” 面 板 底部 的 “创建 新 的 填充 或 调整 图 层 ” 按 钮 ， 在 弹出 的 下 拉 菜 单 中 选择 “ 色 
彩 平衡 ”命令 ， 设 置 参数 如 图 7-14 所 示 。 得 到 图 像 最 终 效 果 ， 如 图 7-15 所 示 。 


图 7-14 


图 a 5 
知识 储备 : 如 何 创建 十 字 选 区 ? 


答 : 选择 “ 圆 角 矩形 工具 ”， 先 创建 一 个 横 条 矩形 选 框 , 在 选项 栏 中 单 击 “ 添 加 到 选区 " 按钮 ， 
| 即 可 在 横 条 选区 基础 上 再 次 创建 一 个 竖 条 选区 。 


二 使 用 魔 棒 工 具 

与 “快速 选择 工具 ”相同 ，“ 魔 棒 工 具 ” 也 是 一 个 快捷 抠 图 工具 ， 不 同 的 是 “ 魔 棒 工具 ” 是 通 
过 设置 的 颜色 容 差 值 的 大 小 来 选取 图 像 中 的 颜色 范围 。 

容 差 值 越 低 ， 选 取 时 所 包含 的 颜色 范围 和 选区 越 小 ， 容 差 值 越 高 ， 选 取 时 所 包含 的 颜色 范围 和 
选区 越 广 ， 如 图 7-16 所 示 。 


图 7-16 
如 果 想 要 抠 取 图 像 


连续 的 颜色 


区 域 ， 可 勾 选 选项 栏 中 的 “连续 ”选项 。 


ER 


es 使 用 钢笔 工具 © 
“钢笔 工具 "主要 是 在 想 要 抠 取 的 图 像 边 缘 绘制 路 径 ， 然 后 将 路 径 转换 为 选区 来 实现 抠 图 效果 ， 


如 图 7-17 所 示 。 


键 临 


© ©@ ©@ 09 


绘制 路 径 : 单 击 “ 钢 笔 工 具 ”， 设置 “工具 模式 ”为 “路 径 ”， 使 用 鼠标 在 抠 取 对 象 的 边缘 单 击 ， 
新 建 工作 路 径 。 在 抠 取 对 象 边缘 多 次 移动 鼠标 并 单 击 ， 即 可 绘制 路 径 。 
调整 路 径 : 绘制 好 路 径 以 后 ， 用 户 仍然 可 在 路 径 上 单 击 鼠 标 ， 以 添加 一 个 新 锚 点 ， 或 者 按 下 Ctrl 


图 7-17 


时 切换 到 “直接 选择 工具 ”， 以 调整 当前 选中 的 锚 点 。 


闭合 路 径 : 当 想 要 抠 取 的 对 象 完整 地 被 路 径 包 围 时 ， 只 要 用 鼠标 单 击 路 径 的 起 始点 ， 即 可 闭合 
路 径 。 
转换 选区 : 必须 将 其 转换 为 选区 ， 才 能 随意 拖 动 路 径 内 的 图 像 。 单 击 选项 栏 中 的 “选区 ”按钮 


或 按 快捷 键 Ctri+Enter， 即 可 将 路 径 转 换 为 选区 。 
实例 43 一 制作 敬 条 广告 © 


面 通过 一 个 实例 的 操 
作 来 强化 这 部 分 的 知 ”法 爱 琵 竹 
识 ， 相 信 大 家 很 快 就 ekliininlyMoliltl els 


会 熟悉 该 工具 的 操作 技巧 。 whole lot of party fun with 


前 面 介绍 了 “ 钢 “加 ly 


* 源 文件 ， 源 文件 第 7 章 \ 董 条 广告 .psd 
* 操作 视频 视频 第 7 章 \ 昔 条 广告 .mp4 


crispy finger lickin bifesl 。 kmmor 


到 执行 “文件 > "打开 " 命令 , 打开 背景 素材 文件 "素材 \ 第 7 章 \005jpg”, 如 图 7-18 所 示 。 
打开 素材 文件 “素材 \ 第 7 章 \006jpg”， 使 用 “钢笔 工具 ” 沿 着 董 条 绘制 路 径 ， 如 图 7-19 所 示 。 


elk [ilninly bliltel 


whole lot of party fun with 
crispy finger lickin bites! 


图 7-18 
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三 按 快 捷 键 Cl+Enter 将 路 径 转换 为 选区 ， 如 图 7-20 所 示 。 执 行 “ 选 择 " > “ 反 向 ”命令 ， 
按 Delete 键 删 除 选 区 内 的 图 像 ， 如 图 7-21 所 示 。 


图 7-20 图 7-21 


he 执行 “选择 ”>“ 色 彩 范围 " 命令 , 使 用 鼠标 单 击 黄色 背景 区 域 ,如 图 7-22 所 示 。 
确定 按钮 ， 按 Delete 1 如 图 7-23 所 示 。 


外 


[hs 
艺 


出 


图 7-22 图 7-23 
葬 返回 背景 文档 , 使 用 "移动 工具 " 拖 入 刚才 抠 取 的 图 像 , 调整 其 位 置 和 大 小 , 如 图 7-24 所 示 。 


本 
四 


工具 ”在 著 条 下 方 绘制 黑色 的 阴影 ， 如 图 7-25 所 示 。 


njy 国有 局 9 四 国有 日 9 


arty fun with Yyf 到 with 
下 ‘bites! Kin bifesl 


SS ™ 


图 7-24 图 7-25 


了 将 该 图 层 转换 为 智能 对 象 ， 执 行 “ 滤 镜 ”> “模糊 ”> “高 斯 模糊 ”命令 ， 在 弹出 的 对 话 杠 
7 一 
页 


中 设置 参数 ， 如 图 7-26 所 示 。 为 其 添加 蒙 版 ， 使 用 黑色 柔 边 画笔 擦 虚 投影 边缘 部 分 ， 并 将 其 “不 透 
明度 ” 降 至 20%， 图 7-27 所 示 。 

大 使 用 相同 的 方法 完成 相似 内 容 的 制作 ,如 图 7-28 所 示 。 新 建 图 层 , 使 用 "钢笔 工具 "绘制 路 径 ， 
如 图 7-29 所 示 。 
一 选择 ' 画 笔 工具 ", 设置 前 景色 为 #835e0e, 选择 一 个 硬度 较 大 的 圆 形 笔触 "大 小 " 为 5 像素 ， 
如 图 7-30 所 示 。 打开 “路 径 " 面板 ,使 用 鼠标 右键 单 击 路 径 缩 览 图 空白 处 ,在 弹出 的 菜单 中 选择 “ 描 
边 路 径 ” 命令 ， 在 弹出 的 “ 描 边 路 径 ” 对 话 框 中 选择 “画笔 ”"， 如 图 7-31 所 示 。 
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四 Bes 


ty BD with 
<In bifesl 


图 7-26 


ybliht]els 


pr with p>。 
i ‘bites! 


™ 


图 7-28 图 7-29 


括 边 路 径 


图 7-30 图 7-31 


单 击 “ 确 定 ” 按 钮 ， 得 到 图 像 效果 ， 如 图 7-32 所 示 。 使 用 相同 方法 完成 相似 内 容 的 制作 ， 
-33 所 示 。 


njy lille)y 


party fun with 
二 全 人 ‘bites! 


图 7-32 图 7-33 


吏 打开“ 字符 " 面板 , 进行 相应 设置 , 如 图 7-34 所 示 。 在 图 像 中 输入 相应 文字 , 得 到 最 终 效果 ， 
如 图 7-35 所 示 。 


kliininly Moliltlel 


whole lot of fun with 
crispy pment enn bites! 


和 9 知识 储备 : 为 什么 无 法 删除 选区 内 的 图 像 ? 

， 。。” 答 : 用 户 在 做 第 三 步 的 时 候 会 发 现 按 Delete 键 无 法 删除 选区 内 的 图 像 。 所 以 在 删除 选区 的 

| 容 之 前 ， 要 先 将 图 层 缩 略图 中 的 “指示 图 层 部 分 锁定 ”图 标 拖 到 “图 层 ” 面板 底部 的 “删除 图 层 ” ， 
| 图 标 上 。 | 


快速 蒙 版 选择 图 像 


在 抠 图 时 可 能 会 遇 到 在 想 要 抠 取 的 对 象 中 使 用 常规 选区 工具 无 法 创建 选区 ， 例 如 一 张 图 像 中 想 
要 抠 取 的 主体 颜色 与 图 像 背景 颜色 没有 太 大 差异 ， 这 时 就 用 到 “以 快速 蒙 版 模式 编辑 工具 ”来 抠 图 。 


* 源 文件 ， 源 文件 \ 第 7 章 \ 服 装 广告 条 .psd 


速 蒙 版 模式 纺 上 操作 视频 : 视频 \ 第 7 章 \ 服 装 广告 条 .mp4 


辑 工具 "与 
速 选择 工具 ” 
的 使 用 方法 差 

不 多 ， 都 是 调整 画笔 大 小 。 为 
了 让 大 家 能 够 轻松 了 解 “以 快 
速 蒙 版 模式 编辑 工具 ”的 使 用 
方法 ， 下 面 通过 实际 操作 向 大 
家 讲解 。 


加 执行 文件 > “打开 ”命令 , 打开 素材 文件 " 素材 \ 第 7 章 \007jpg” ， 如 图 7-36 所 示 。 

复制 图 层 并 隐藏 背景 图 层 ， 单 击 “ 以 快速 蒙 版 模式 编辑 ”按钮 ， 然 后 使 用 “画笔 工具 ”涂抹 人 物 ， 
如 图 7-37 所 示 。 
次 单 击 “以 快速 蒙 版 模式 编辑 ”按钮 ， 得 到 选区 如 图 7-38 所 示 。 按 Delete 键 ， 即 可 将 
背景 部 分 删除 ， 取 消 选 区 ， 抠 取 人 物 如 图 7-39 所 示 。 
天 打开 素材 文件 “素材 \ 第 7 章 \008jpg”， 将 抠 出 的 人 物 拖 入 ， 并 适当 调整 其 位 置 和 大 小 ， 
如 图 7-40 所 示 。 在 a 上 方 新 建 图 层 ， 使 用 黑色 柔 边 画笔 涂抹 出 人 物 的 阴影 ， 如 图 7-41 所 示 。 
三 单 击 * 板 底部 的 “创建 新 的 填充 或 调整 图 层 ” 按 钮 ， 选 择 “ 亮 度 / 对 比 度 ”选项 ， 
在 弹出 的 “属性 ” 而 板 中 设置 参数 ， 图 7-42 所 示 。 打 开 “ 字 符 ” 面 板 ， 进 行 相应 设置 ， 并 在 画布 
中 输入 相应 的 文字 ， 如 图 7-43 所 示 。 


|— 师 由 2》 了 os em 


图 7-37 


图 7-38 


WEEKEND2020 


TDAYS Coupon Week! Wbcv Edgf Rome Rodf ~! 


DATE 2 


图 7-40 


1 


I 


Er 


图 7-42 图 7-43 
三 双击 该 图 层 缩 览 图 ， 选择 “外 发 光 ” 选 项， 设置 参数 如 图 7-44 所 示 。 设 置 完成 后 单 击 “ 确 
定 ” 按 钮 ， 得 到 图 像 最 终 效果 ， 如 图 7-45 所 示 。 
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在 绘制 人 物 背 后 的 阴影 时 ， 用 户 可 以 降低 画笔 的 不 透明 度 ， 也 可 以 在 绘制 好 阴影 后 ， 在 “图 层 ”面板 中 修改 图 


层 的 整体 不 透明 度 。 


| 当知 识 储备 : 为 什么 创建 剪贴 蒙 版 ? | 
| 答 : 创建 剪贴 蒙 版 主要 是 为 了 避免 新 建 的 调整 图 层 效果 会 影响 其 他 图 层 效 果 ， 创 建 剪贴 蒙 版 ， 
| 后 只 会 对 其 下 方 的 图 层 有 影响 。 | 


湿 


在 抠 图 的 时 候 ， 不 免 会 遇 到 一 些 想 要 抠 取 的 图 像 边 缘 还 有 一 些 背景 中 的 杂 色 无 法 准确 清除 掉 ， 
这 时 就 需要 调整 边缘 这 项 操作 了 。 


实例 45 一 一 制作 精美 女装 广告 ) 
想 要 将 一 个 图 
像 中 的 一 个 对 象 完 
美 地 抠 取出 来 ， 就 
要 在 其 周围 创建 一 局 由 
个 精确 的 选区 下 WINNING 2 
面 来 一 起 制作 一 个 实例 ,为 了 能 够 | COMBINATIONS 


> 源 文件 ， 源 文件 第 7 章 精 美女 装 广告 .psd 
操作 视频 ， 视频 第 7 章 精 美女 装 广告 .mp4 


清楚 地 为 大 家 展示 调整 边缘 的 效果 ， Sr ee 
在 此 选择 了 一 张 无 法 单独 使 用 “ 钢 sa ees 


笔 工 具 ” 抠 出 的 人 物 作为 素材 。 


BUY 1, GET 1 50% OFF 


opwom 


加 执行 "文件" > "打开 " 命令 , 打开 素材 文件 "素材 \ 第 7 章 \009jpg”", 复制 图 层 , 并 使 用 “ 快 
速 选择 工具 ”绘制 选区 ， 如 图 7-46 所 示 。 

三 隐藏 背景 图 层 ， 单 击 选项 栏 中 的 “选择 并 遮 章 ”按钮 ， 在 弹出 的 属性 面板 中 进行 相应 设置 ， 
使 用 “调整 边缘 画笔 工具 ”在 图 像 中 的 人 物 发 丝 边缘 涂抹 ， 如 图 7-47 所 示 。 
码 使 用 相同 的 方法 涂抹 人 物 发 丝 的 其 他 边缘 ， 涂 抹 完 成 后 单 击 “确定 ”按钮 ， 得 到 图 像 效 果 ， 
如 图 7-48 所 示 。 打 开 素 材 文件 “素材 \ 第 7 章 \010jpg”， 拖 入 抠 出 的 图 像 ， 适 当 旋转 并 调整 其 位 
置 和 大 小 ， 如 图 7-49 所 示 。 
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图 7-46 


第 7 章 设计 网 站 中 的 广告 条 


图 7-47 


图 7-48 图 7-49 
了 复制 图 层 ， 分 别 使 用 黑白 柔 边 画笔 修改 蒙 版 ， 使 人 物 的 边缘 更 清晰 、 完 整 ( 请 隐藏 原来 的 
习 层 )， 如 图 7-50 所 示 。 选 择 图 层 ( 非 蒙 版 )， 执 行 “图 像 ”>“ 调 整 ”>“ 阴 影 高 光 ” 命 令 ， 在 弹出 
的 对 话 框 中 适当 设置 参数 值 ， 如 图 7-51 所 示 。 


图 7-50 
吏 ) 设置 完成 后 单 击 “ 确 定 ” 
全 部 操作 步骤 ， 如 图 7-52 所 示 。 
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图 7-51 


按钮 ， 可 以 看 到 人 物 过 暗 的 阴影 部 分 有 了 明显 的 改善 ， 至 此 完成 
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图 7-52 


Photoshop CC 网 站 UI 设计 全 程 揭秘 (第 2 版 ) 


刍 知识 储备 : 为 什么 要 将 优化 后 的 选区 输出 到 图 层 蒙 版 ? | 
答 : 因为 蒙 版 是 非 破坏 性 的 ， 将 图 像 输出 到 图 层 蒙 版 ， 以 便于 再 次 对 图 像 选 区 的 不 足 之 处 进 ， 


行 修改 。 


焦点 区 域 


对 快速 选择 选区 ， 用 户 也 可 以 执行 “选择 ”>“ 焦 点 区 域 ” 命 令 ， 在 弹出 的 “焦点 区 域 ”对 话 框 
中 设置 各 项 参数 ， 如 图 7-53 所 示 ， 选 区 范围 如 图 7-54 所 示 。 


图 7-53 图 7-54 
@ ”自动 : 必须 勾 选 该 选项 ， 在 图 像 中 自动 、 快 速 地 选择 选区 。 
介 ”输出 : 如 果 是 只 要 选区 ， 可 以 选择 选区 。 也 可 以 选择 蒙 版 ， 便 于 后 期 调整 。 
名 ” 柔 化 边缘 : 勾 选 该 选项 ， 消 除 自动 边缘 所 带 来 的 锯齿 。 
名 ”调整 边缘 : 勾 选 该 选项 ,可 以 调整 “自动 ”选项 下 处 理 得 比较 粗糙 的 边缘 ， 对 选区 进行 细 化 处 理 。 


| 当知 i 识 储备 : 为 何 使 用 “自动 ”功能 ? | 
| 使 用 "焦点 区 域 " 的 目的 就 是 快速 方便 地 创建 选区 , 如 果 没有 勾 选 “ 自 动 " 选项 , 可 以 勾 选 上 ，， 
| 看 一 下 抠 图 效果 如 何 。 如 果 达 不 到 要 求 ， 就 放弃 使 用 这 个 命令 。 如 果 图 像 中 有 阴影 ， 那 么 抠 图 时 | 
， 能 达到 抠 出 阴影 之 外 的 区 域 才 可 以 。 | 


使 用 修 边 D 


调整 完 边缘 以 后 ， 被 抠 出 的 图 像 边缘 可 能 还 存在 一 些小 问题 ， 例 如 黑色 或 白色 的 杂 边 ， 利 用 
Photoshop CC 中 的 “ 修 边 ”可 以 处 理 这 些 琼 手 的 小 问题 。 
移 除 白 边 和 黑 边 ;) 


在 抠 完 图 以 后 ， 图 像 边缘 可 能 会 遗留 一 些 细小 的 白 边 或 黑 边 ， 人 个 小 步骤 就 可 以 
0 执行 “图 层 ”>“ 修 边 ”>“ 移 去 黑色 杂 边 ”命令 ， 即 可 去 除 黑色 杂 边 ; 执行 “图 
层 ”>“ 修 边 ”>“ 移 去 白色 杂 边 ”命令 ， 即 可 去 除 白 色 杂 边 ， 如 图 7-55 所 示 。 


i 


图 7-55 


于 去 边 实 现 更 好 的 合成 效果 > 


“去 边 " 即 为 移 去 图 像 的 边缘 。 执行 “图 层 ” >“ 修 边 ” > "去 边 "命令 , 弹出 相应 的 对 话 框 , 在 " 宽 
度 ” 文 本 框 中 输入 想 要 去 除 图 像 的 边 的 宽度 参数 值 ， 单 击 “ 确 定 ”按钮 ， 即 可 移 去 图 像 的 边缘 。 


ERN 
空 Nn 目 
实例 46 一 一 制作 时 尚 服装 广告 条 革 ) 
执行 “图 层 ”>“ 修 边 ”>“ 去 边 "命令 修改 图 像 的 边缘 ,操作 简 单 且 方 便 掌握 ， 
时 能 够 使 一 些 图 像 的 合成 效果 更 加 完美 。 下 面 就 通过 一 个 实际 的 操作 案例 来 学 习 
“去 边 ” 命 令 的 具体 运用 。 
* 源 文件 ， 源 文件 "第 7 章 \ 时 尚 服装 广告 条 .psd 
* 操作 视频 视频 第 7 章 \ 时 尚 服装 广告 条 .mp4 


可 


0 执行“ 文件” >“ 新建 ”命令 ， 新 建 一 个 空白 文档 ， 如 图 7-56 所 示 。 新 建 图 层 ， 使 用 “ 钢 
笔 工具 ”创建 路 径 并 转换 为 选区 ， 填 充 线性 渐变 色 ， 填 充 效果 如 图 7-57 所 示 。 


图 7-56 图 7-57 


一 打开 素材 文件 "素材 \ 第 7 章 \011jpg", 使 用 "快速 选择 工具 " 快速 抠 出 人 物 , 如 图 7-58 所 示 。 
将 其 拖 入 新 建 的 设计 文档 中 ， 适 当 调 整 其 位 置 和 大 小 ， 并 创建 剪贴 蒙 版 ， 如 图 7-59 所 示 。 


RE ec B= 


加 使 相同 的 方法 抠 取 玫瑰 ， 并 将 其 拖 入 设计 文档 中 , 适当 调整 位 置 和 大 小 , 如 图 7-60 所 示 。 
执行 “图 层 > “ 修 边 " > “去 边 " 命 命令 , 在 “去 边 ” 对话 框 中 设置 “宽度 " 为 50 像素 , 如 图 7-61 所 示 。 
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图 7-60 图 7-61 
04 ts 并 分 别 调整 它们 的 位 置 ， 如 图 7-62 所 示 。 将 所 有 花朵 图 层 编组 ， 然 后 
载 入 “图 层 1” 的 选区 ， 为 该 组 添 加 图 层 蒙 版 ， 如 图 7-63 所 示 。 


图 7-62 图 7-63 
天 新 建 图 层 ， 使 用 “椭圆 选区 工具 ”创建 正 圆 选 区 ， 并 填充 白色 ， 如 图 7-64 所 示 。 选 择 “ 橡 


皮 擦 工具 ”， 设 置 笔触 大 小 为 3 像素 ， 擦 除 图 像 中 不 需要 的 部 分 ， 如 图 7-65 所 示 。 


图 7-64 图 7-65 
三 再 次 新 建 图 层 , 使 用 " 自 定义 形状 工具 " 选择 合适 的 形状 绘制 路 径 , 并 变换 选区 , 填充 为 黑色 ， 
如 图 7-66 所 示 。 打 开 “ 字 符 ” 面 板 ， 进 行 相应 设置 ， 在 刚才 绘制 的 黑色 三 角形 中 间 输 入 白色 文字 符 
号 ， 如 图 7-67 所 示 。 
观 使 用 相同 的 方法 输入 其 他 文字 内 容 ， 如 图 7-68 所 示 。 使 用 相同 方法 完成 相似 内 容 的 制作 ， 
如 图 7-69 所 示 。 
葬 新 建 图 层 , 选择 “钢笔 工具 ”, 设置 “工具 模式 " 为 “路 径 ”, 在 画布 中 绘制 路 径 , 并 转换 路 径 ， 
填充 颜色 为 可 ccc00， 如 图 7-70 所 示 。 
吏 ) 再 次 新 建 图 层 ， 选 择 “ 直 线 工具 ”， 设 置 “ 工 具 模式 ”为 “像素 ”，“ 粗 细 ” 为 1 像素 ， 
颜色 为 #7b7b7b， 绘 制 直线 ， 如 图 7-71 所 示 。 
于 使 用 相同 的 方法 完成 相似 内 容 的 制作 ， 得 到 图 像 最 终 效果 ， 如 图 7-72 所 示 。 
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图 7-66 图 7-67 


图 7-68 


图 7-70 图 7-71 


刍 知识 储备 : 图 像 执行 “去 边 ”命令 后 合成 图 像 有 什么 效果 ? 


 。 答 : 执行 “去 边 "命令 后 ， 图 像 边缘 会 出 现 比 较 模糊 的 羽化 效果 ， 使 抠 取 的 对 象 在 背景 图 像 | 
， 中 看 起 来 更 自然 


国志 Photoshop CC 网 站 UI 设计 全 程 揭秘 (第 2 版 ) 


使 用 画笔 工具 绘图 2 


很 多 初学 者 可 能 认为 “画笔 工具 ”在 Photoshop 中 似乎 没有 什么 大 用 处 ， 因 为 “画笔 工具 ”在 
图 时 并 不 好 控制 ，“ 钢 笔 工具 ”似乎 可 以 代替 它 。 其 实 不 然 ，“ 画 笔 工具 ”在 Photoshop 中 也 有 
任何 工具 都 无 法 代替 的 作 
很 多 的 广告 都 需要 各 种 华丽 的 装饰 使 其 起 到 锦上添花 的 作用 ， 使 用 “画笔 工具 ”就 可 以 完成 


中 站 


各 种 华丽 的 装饰 ， 如 图 7-73 所 示 。 单 击 选项 栏 中 的 “ 妨 换 画笔 面相 板 ”， 在 弹出 的 “画笔 ”面板 中 有 
许多 画笔 的 预 设 供用 户 选 择 ， 通 过 设置 各 项 参数 来 修改 当前 的 画笔 ， 并 且 可 以 设置 出 更 多 新 的 画笔 


图 7-73 


实例 47 一 一 制作 礼物 宣传 广告 条 


使 用 “画笔 工具 ”究竟 能 制作 什么 样 的 装饰 ? 下 面 一 起 来 制作 一 个 实例 ， 看 看 


怎样 利用 简单 的 “画笔 工具 ”制作 令 人 感到 不 可 思议 的 华丽 光 点 效果 。 


> 源 文件 ， 源 文件 第 7 章 \ 礼 物 宣传 广告 条 .psd 
操作 视频 ， 视频 第 7 章 \ 礼 物 宣传 广告 条 .mp4 


A 


执行 “文件 ” >“ 打开” 命令， 打开 素材 图 像 "素材 \ 第 7 章 \013jpg”， 如 图 7-74 所 示 。 
新 建 图 层 ， 选 择 “ 画 笔 工 具 ”， 进 行 相应 的 设置 并 在 画布 中 绘制 白色 贺 点 ， 如 图 7-75 所 示 。 


图 7-74 


单 击 选项 栏 中 的 “切换 画笔 面板 ”按钮 ， 分 别 选择 “画笔 笔尖 形状 ” “散布 ”和 “传递 " 
选项 进行 相应 的 设置 ， 如 图 7-76 所 示 。 


图 7-76 
三 设置 完成 后 关闭 "画笔 "面板 ,继续 在 画布 中 拖 动 鼠标 绘制 圆 点 ,如 图 7-77 所 示 。 打 开 图 像素 
材 \ 第 7 章 \014.png”， 将 其 拖 入 文档 中 ， 并 适当 调整 位 置 和 大 小 ， 如 图 7-78 所 示 。 
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OA 


人 生 
图 7-77 图 7-78 
芭 执行 “文件 > “新建 ”命令 ， 新 建 一 个 空白 文档 ， 如 图 7-79 所 示 。 使 用 “钢笔 工具 ”在 
画布 中 绘制 任意 颜色 的 形状 。 执 行 “ 编 辑 ”> “定义 画笔 预 设 ”命令 ， 在 弹出 的 对 话 框 中 单 击 “ 确 定 ” 
按钮 ， 如 图 7-80 所 示 。 


图 7-79 图 7-80 
天 返回 设计 文档 , 打开 “画笔 " 面板， 分别 选择 “画笔 笔尖 形状 ”“ 形 状 动态 ” "散布 ” 和 “ 传 
递 ”选项 并 设置 参数 值 ， 如 图 7-81 所 示 。 
天 设置 完成 后 关闭 “画笔 ” 面板， 新建 图 展 ， 在 画布 中 绘制 星星 ， 如 图 7-82 所 示 。 打 开 “ 字 
符 ” 面 板 进行 相应 设置 ， 并 在 图 像 中 输入 相应 文字 ， 如 图 7-83 所 示 。 
现 使 用 相同 的 方法 输入 其 他 文字 ， 得 到 图 像 最 终 效 果 ， 如 图 7-84 所 示 。 


图 7-82 


包 知识 储备 : 为 什么 要 频繁 新 建 图 层 ? 
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图 7-83 


7 辣 


Zr 


答 : 本 实例 的 制作 过 程 中 新 建 了 很 多 图 层 ， 在 每 一 个 图 层 上 都 有 一 个 独立 的 个 体 。 np 


立 在 一 个 图 层 上 ， 就 会 使 后 面 的 操作 非常 不 方便 ， 而 且 修改 的 时 候 也 会 很 麻烦 。 


在 定义 画笔 预 设 图 案 时 ， 可 以 是 任意 颜色 ， 
认定 为 空 值 。 


使 用 蒙 版 合成 图 像 


但 是 不 可 以 涂抹 白色 。 因 为 定义 画笔 时 白色 和 透明 像素 都 会 被 系统 


使 用 “ 蒙 版 ” 抠 图 ， 可 以 保护 抠 取 对 象 以 外 的 区 域 ， 以 便于 对 抠 取 出 现 误差 的 图 像 进 行 调 整 。 
使 用 蒙 版 抠 图 ， 图 像 中 选择 的 区 域 也 就 是 不 需要 的 部 分 将 会 被 图 层 蒙 版 遮盖 ， 而 需要 显示 的 部 分 也 


就 是 想 要 抠 取 的 部 分 就 是 选择 的 区 域 了 。 


图 层 蒙 版 著 换 图 层 局 部 ” 


妈 层 蒙 版 可 以 使 用 绘画 工具 和 选择 工具 进行 编辑 ， 使 用 图 层 蒙 版 抠 图 是 具有 保护 性 的 ， 它 可 以 
保护 素材 的 完整 性 
蒙 版 有 很 多 种 类 型 ， 在 此 重点 学 习 使 用 率 最 高 的 图 层 蒙 版 。 要 想 用 一 张 图 像 在 另 一 张 图 像 中 只 
显示 其 中 的 某 个 部 分 ， 就 要 遮盖 图 像 中 不 想 显 示 的 部 分 ， 如 图 7-85 所 示 。 
加 ”画笔 工具 隐藏 图 像 : 选择 “画笔 工具 ”, 设置 前 景色 为 黑色 ， 在 图 像 中 需要 隐藏 的 区 域 进行 涂抹 ， 
被 画笔 涂抹 的 区 域 就 会 被 隐藏 。 
名 ”使 用 渐变 隐藏 图 像 : 单 击 “ 添 加 图 层 蒙 版 ”按钮 为 图 层 添加 图 层 蒙 版 ， 使 用 “渐变 工具 ”在 
图 像 中 拖 动 ， 填 充 黑白 渐变 。 
名 ”创建 选区 隐藏 图 像 : 将 图 像 中 需要 抠 取 的 对 象 使 用 选区 工具 框 选 ， 单 击 “ 图 层 ” 面 板 底部 的 “ 添 


0 


局 


层 蒙 版 ”按钮 ， 没 有 被 选区 框 选 的 区 域 直 接 被 隐藏 ， 被 框 选 的 区 域 即 为 显示 的 区 域 。 


执行 “图 层 ”>“ 图 层 蒙 版 ”命令 ， 在 子 菜单 中 可 选择 不 同 的 命令 为 图 层 添 ， 也 可 以 使 用 相同 方法 添 
加 矢量 蒙 版 。 为 了 方便 ， 一 般 会 单 击 “ 图 层 ”面板 底部 的 “添加 蒙 版 ”按钮 为 加 图 层 :这 版 


图 层 蒙 版 融合 图 像 
有 时 使 用 蒙 版 直接 将 抠 好 的 图 放 入 另 一 个 背景 图 像 中 ， 可 能 会 出 现 图 像 边缘 不 够 圆滑 的 情况 ， 
使 合成 的 图 像 效果 看 起 来 很 僵硬 ， 这 时 就 要 对 图 像 的 边缘 进行 处 理 。 


实例 48 一 制作 快餐 店 广告 条 @ 


如 何 使 用 
版 抠 图 ? 怎样 才 
能 让 抠 取 的 图 
边缘 变 得 


* 源 文件 ， 源 文件 第 7 章 快 餐 店 广告 条 .psd 
p> 操作 视频 : 视频 第 7 章 \ 快 餐 店 广告 条 .mp4 
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例 的 制作 ， 用 户 就 可 以 熟练 地 掌握 

图 层 蒙 版 。 I 
名 执行 "文件 >“ 打 开 " 

命令 ,打开 素材 文件 “素材 \ 第 7 

章 \015jpg”， 如 图 7-86 所 示 。 

打开 素材 文件 “素材 \ 第 7 章 \ 


street food 


RK er 


016jpg”， 将 其 拖 入 刚才 打开 的 背景 中 ， 适 当 调 整 位 置 和 大 小 ， 如 图 7-87 所 示 。 


street food 


图 7-86 

有 0 如 单 击 “图 层 ” 面 板 底 部 的 “添加 图 层 蒙 版 ”按钮 ， 然 后 使 用 黑色 柔 边 画 笔 在 拖 入 的 素材 

边缘 涂抹 ， 如 图 7- 88 所 示 。 Ce ， 使 用 “矩形 选 框 工具 ”在 图 像 中 创建 选区 ， 并 填充 颜色 为 
#e5e2dc， 如 图 7-89 所 示 。 
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图 7-88 图 7-89 
观 为 该 图 层 添加 蒙 版 ， 选 择 “ 画 笔 工 具 ”， 并 选择 合适 的 笔触 ， 设 置 前 景色 为 黑色 ， 在 色 块 
中 反复 涂抹 ， 制 作出 污 迹 效果 ， 操 作 完 成 如 图 7-90 所 示 。 


a, 


love for street food 


ve thoughts. 


和 a 知识 储备 : 使 用 “画笔 工具 ”涂抹 图 像 时 出 错 了 如 何 修改 ? | 
答 : 在 涂抹 图 像 时 可 能 会 一 不 小 心 多 涂 了 ， 将 图 像 中 不 需要 隐藏 的 地 方 也 隐藏 了 ， 这 时 可 以 | 
| 将 画笔 颜色 改 为 白色 ， 在 不 小 心 多 涂 的 地 方 涂抹 ， 图像 就 会 恢复 显示 。 | 


使 用 前 贴 蒙 版 


使 用 剪贴 蒙 版 可 以 使 下 方 图 层 的 轮廓 让 盖 上 方 的 图 展 ， 上 方 图 层 的 显示 区 域 由 下 方 图 层 的 范 团 
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AN 
@) 
ND/ 


关于 剪贴 蒙 版 

的 应 用 也 是 非常 广 

泛 的 ， 很 多 企业 利 

用 它 制作 一 些 宣传 a 

告 。 下 面 通过 一 和 各 他 人 答 守 疹 决 
个 实例 的 制作 ， 使 用 户 对 剪贴 蒙 版 有 一 

一 定 的 认识 。 


* 源 文件 : 源 文件 第 7 章 \ 画 廊 展 览 小 广告 .psd 
* 操作 视频 : 视频 \ 第 7 章 \ 画 廊 展 览 小 广告 .mp4 


贡 执行 “文件 >“ 打开” 命令 , 打开 素材 文件 “素材 \ 第 7 章 \017jpg”， 如 图 7-91 所 示 。 
选择 “钢笔 工具 ”， 设置 “工具 模式 ”为 “形状 ”， 在 画布 中 绘制 任意 颜色 的 形状 ， 如 图 7-92 所 示 。 


图 7-91 图 7-92 


了 双击 该 图 层 缩 览 图 , 选择 “斜面 和 浮雕” 选项 , 设置 参数 如 图 7-93 所 示 。 执行 “文件 ” >" 新 
”命令 ， 新建 一 个 空白 文档 ， 如 图 7-94 所 示 。 


图 7-93 图 7-94 
有 如 使 用 “钢笔 工具 ”， 设 置 “ 填 充 ” 为 黑色 ， 在 画布 中 绘制 形状 ， 如 图 7-95 所 示 。 执行 “ 编 
辑 >“ 定 义 图 案 ” 命 令 ， 在 弹出 的 “图 案 名 称 ” 对 话 框 中 单 击 “ 确 定 ”按钮 ， 如 图 7-96 所 示 。 
观 返回 设计 文档 中 ， 在 “图 层 样式 ”对 话 框 中 选择 “纹理 ”选项 ， 设 置 参 数 如 图 7-97 所 示 。 
选择 “内 阴影 ”选项 ， 设 置 参数 如 图 7-98 所 示 。 


Ea 
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图 7-95 


图 7-96 


三 继续 选择 “渐变 过 加 ”选项 ， 设 置 参 数 如 图 7-99 所 示 。 设 置 完 成 后 单 让 


玛 


鼠标 右键 单 击 图 层 缩 览 图 ， 


图 7-97 


像 效果 如 图 7-100 所 示 。 


图 7-99 


三 将 “素材 \ 第 7 章 \019jpg” 拖 入 设计 文档 


图 7-98 


"矩形 工具 ”在 画布 


图 7-100 


二 “确定 ”按钮 ， 


Ph， 适当 调整 其 位 置 ， 如 图 7-101 所 示 。 使 用 


在 弹出 的 快捷 菜单 中 选择 “创建 剪贴 蒙 版 ”命令 ， 如 图 7-102 所 示 。 


图 7-101 


到) 使 用 相同 方法 完成 相似 的 制 


图 7-102 


FE, 并 将 相关 图 层 进行 编组 , 重 命名 为 “框架 ”, 如 


绘制 一 个 人 


意 颜色 的 和 矩形， 如 


图 


7-104 所 示 。 


图 


7-103 所 示 。 
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图 7-103 图 7-104 


三 使 用 相同 的 方法 为 其 添加 图 层 样 式 ， 并 修改 该 图 层 “ 填 充 ” 为 0%， 如 图 7-105 所 示 。 使 
用 相同 方法 完成 相似 的 制作 ， 如 图 7-106 所 示 。 


图 7-105 图 7-106 


名 打开“ 字符" 面板, 进行 相应 设置 , 并 在 图 像 中 输入 文字 , 如 图 7-107 所 示 。 打开 “图 层 样式 ” 
对 话 框 ， 选 择 “ 和 斜面 和 浮雕 ”选项 ， 设 置 各 项 参数 。 设 置 完成 后 单 击 “确定 ” 按钮 ， 如 图 7-108 所 示 。 


a 


ES 


图 7-107 图 7-108 


驳 ) 新 建 图 层 ， 重 命名 为 “投影 ”， 使 用 黑色 和 柔 边 画笔 在 画布 中 涂抹 ， 如 图 7-109 所 示 。 修 改 
其 “不 透明 度 ” 为 80% ， 并 将 该 图 层 移动 到 最 下 方 ， 如 图 7-110 所 示 。 


图 7-109 图 7-110 


Photoshop CC 网 站 UI 设计 全 程 揭秘 (第 2 版 ) 


本 实例 中 , 因为 图 像 中 3 个 相框 都 是 相同 的 , 所 以 在 制作 好 一 个 相框 后 将 其 进行 编组 , 直接 复制 出 另外 两 个 相框 ， 
然后 将 另外 两 个 相框 中 的 照片 和 文字 替换 掉 即 可 。 


于 使 用 相同 方法 完成 相似 内 容 的 制作 ， 得 到 图 像 最 终 效果 ， 如 图 7-111 所 示 。 


和 知识 储备 : “不 透明 度 ” 和 “填充 ”有 什么 区 别 ? 
| 答 : “不 透明 度 ” 用 于 控制 图 层 、 图 层 组 中 绘制 的 像素 和 形状 的 不 透明 度 ， 如 果 图 层 应 用 了 ， 
| 图 层 样式 ， 当 该 值 有 所 变动 时 ， 图 层 样式 也 会 随 着 变动 。 而 “填充 ” 则 相反 ， 当 该 值 有 所 变动 时 ， ， 
| 不 会 影响 图 层 样式 的 不 透明 度 。 | 


~ 


党 8) 直道 网 站 页 面 的 配色 p 


式 ， 适 当 了 解 和 掌握 一 些 色彩 和 版 式 方面 的 理论 


网 页 设计 是 一 种 集 配色 和 版 式 设计 为 一 体 的 
知识 ， 可 以 帮助 用 户 更 科学 合理 地 布局 和 表现 页 面 。 


色彩 基础 知识 p 
EF 的 ? 色彩 有 哪些 分 类 ? 色彩 的 


的 颜色 是 如 何 产 4 


配色 是 网 页 设计 中 非常 重要 的 一 环 ， 那 么 不 同 
构成 要 素 又 有 哪些 呢 ? 这 就 是 本 节 要 讲解 的 内 容 。 


于 光 和 色 的 三 原色 多 
我 们 平时 使 用 到 的 名 种 显示 器 就 是 基于 这 3 种 颜 


光 的 三 原色 是 指 红色 、 绿 色 和 蓝 色 ( 即 RGB)，3 
色 显示 的 ， 如 图 8-1 所 示 。 
颜色 相互 以 不 同 的 比例 混合 可 以 生成 几乎 所 有 的 颜色 ， 却 不 能 由 其 他 颜色 所 生成 ， 因 此 


这 3 种 
被 称 为 “原色 ”， 如 图 8-2 所 示 。 
黄 Y 
红 R 
白 W 
图 8-1 图 8-2 


印刷 ， 如 图 8-3 


色 的 三 原色 是 指 青色 、 洋 红色 和 黄色 ( 即 CMY)， 这 3 种 颜色 的 颜料 通常 被 
所 示 。 
我 们 看 到 的 印刷 品 ， 实 际 上 看 到 的 是 纸张 反射 的 光线 。 纸 张 本 身 不 是 发 光 体 ， 它 只 能 吸收 和 反 
原色 就 是 吸收 红 、 绿 、 蓝 之 后 反射 出 的 颜色 , 即 青色 、 洋红 色 和 黄色 , 它们 也 是 红 、 


射 光线 , 因此 色 的 三 
绿 、 蓝 的 补 色 ， 如 图 8-4 所 示 。 
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青 RGB(0、255、255) 红 RGB(255、0、0) 


绿 RGB(0、255、0) 
牙 RGB(O、0、255) 


洋红 RGB(255、0、255) 
页 RGB(255、255、0) 


图 8-3 图 8-4 


色彩 可 以 分 为 3 种 类 型 : 分 别 是 物体 色 、 固 有 色 和 光源 色 ， 下 面 是 对 不 同色 种 特征 的 具体 讲解 。 


物体 色 是 指 物体 本 身 没 有 发 光 功 能 ， 通 过 对 不 同 光源 颜色 进行 吸收 和 反射 后 呈现 出 的 颜色 ， 如 
图 8-5 所 示 。 


图 8-5 
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人 们 习惯 上 把 白色 日 光 下 物体 呈现 出 来 的 色彩 称 为 固有 色 。 严 格 地 说 ， 固 有 色 是 指 物体 固有 的 
属性 在 常态 光源 下 表现 出 来 的 色彩 。 
事实 上 ， 我 们 日 常生 活 中 所 看 见 的 物体 时 时 刻 刻 都 在 受到 各 种 不 同 光源 的 影响 ， 所 谓 的 “常态 
光源 ”很 难 实现 ， 所 以 也 有 一 些 人 否认 固有 色 的 存在 ， 如 图 8-6 所 示 。 


光源 色 是 指 光源 ( 如 日 光 、 白 炽 灯 和 蜡烛 等 ) 照射 到 不 透明 物体 上 所 呈现 出 的 颜色 。 不 同 物体 在 
同 光源 下 所 呈现 出 的 颜色 并 不 一 样 ， 例 如 一 张 白 纸 在 太阳 光 下 呈现 白色 ， 在 白炽 灯 下 则 呈现 出 明 
黄色 。 联 明 的 摄影 师 们 总 是 喜欢 通过 构造 不 同 的 光影 效果 和 色调 来 体现 被 摄 物体 的 情绪 和 内 涵 ， 
8-7 所 示 。 


并 间 习 
ES 


色彩 的 构成 要 素 《 
色彩 的 构成 要 素 主要 有 3 个 : 色相 、 饱 和 度 和 明度 , 所 有 的 颜色 都 可 以 通过 这 3 种 属性 标示 出 来 。 


其 中 色相 用 于 标记 颜色 的 相貌 ， 饱 和 度 用 于 标记 颜色 的 纯度 ， 明 度 用 于 标记 颜色 的 明亮 程度 。 
b's 

色相 是 指 色 彩 的 相貌 , 这 是 区 分 色彩 的 主要 依据 。 人 们 按照 可 见 光谱 的 顺序 将 色相 划分 为 12 种 : 
红 、 红 检 、 黄 榨 、 黄 、 黄 绿 、 绿 、 绿 赣 、 蓝 绿 、 蓝 、 蓝 紫 、 紫 和 红 紫 ， 如 图 8-8 所 示 。 


2. 包 和 度 


饱和 度 是 指 色彩 的 鲜艳 浑浊 程度 ， 也 称 “ 纯 度 ”。 色 彩 的 饱和 度 越 高 ， 色 相 感 就 越 明确 、 纯 粹 ， 
直至 得 到 原色 ， 色 彩 的 饱和 度 越 低 ， 看 起 来 就 越 灰暗 无 光 ， 直 至 得 到 灰色 ， 如 图 8-9 所 示 。 


12 色相 环 饱和 度 不 断 降低 
图 8-8 图 8-9 


HID 
颜色 有 深浅 、 明 暗 的 变化 ， 这 就 是 “明度 ”。 明 度 越 高 ， 颜 色 看 起 来 越 明 亮 ， 明 度 越 低 ， 颜 色 
看 起 来 越 灰暗 。 所 有 颜色 明度 最 高 均 得 到 白色 ， 所 有 颜色 明度 最 低 均 得 到 黑色 。 


色彩 的 混合 


色彩 混合 包括 加 色 混 合 减 色 混合 和 中 性 混合 ， 主 要 是 指 两 种 或 两 种 以 上 的 色彩 通过 混合 生成 新 
色彩 的 方法 ， 如 图 8-10 所 示 。 


加 色 混 合 减 色 混合 
图 8-10 
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1. 加 色 混合 》 


加 色 混 合 也 称 正 混合 或 加 光 混 合 ， 是 由 于 色光 相互 混合 时 明度 不 断 增 加 而 得 名 。 最 常见 的 RGB 
模式 就 是 加 色 混合 模式 ， 电 子 屏幕 就 是 以 这 种 方式 成 色 的 。 由 加 色 混 合 可 以 得 出 : 

3@:E@-@0 = 4®@:4@-%O 

纪 I@+E@= 洋 I@ 红 @ + 44@ +E@= EO 


减 色 混合 也 称 负 混 合 或 减 光 混合 ， 是 指 以 色 的 三 原色 ， 即 青 、 洋 红 和 黄 构成 彩色 图 像 。 这 3 种 
色彩 相互 混合 生成 的 新 色彩 明度 会 不 断 降低 , 彩色 照片 就 是 以 这 种 方式 成 色 的 。 由 减 色 混 合 可 以 得 出 : 

洋红 全 + 英国 -= 红 生 。。 青 合 + 黄色 盛 = 绿 合 

青 合 + I@-E@® 青 @@ + 洋红 合 + 黄 恩 = 果 合 


ZE 


中 性 混合 是 指 色彩 并 没有 真正 混合 ， 但 由 于 人 的 视觉 停留 造成 颜色 混合 错觉 的 混合 方式 ， 主 要 
包括 “ 色 盘 旋转 混合 ”和 “空间 视觉 混合， o 

将 两 种 以 上 的 颜色 等 量 涂抹 在 圆 盘 上 ， 使 其 快速 旋转 ， 即 可 看 到 新 的 颜色 ， 这 种 现象 称 为 “ 
盘旋 转 混合 ”， 比 较 常 见 的 例子 有 风车 、 电 风扇 和 旋转 木马 等 。 

把 不 同 的 颜色 以 点 、 线 、 网 或 小 块 面 等 形状 错 杂 排 列 在 纸张 上 ， 离 开 一 段 距离 就 能 看 到 空间 混 
合 出 来 的 新 颜色 ， 这 种 现象 就 叫 作 “空间 视觉 混合 ” 
报纸 印刷 所 使 用 的 网 点 印刷 就 是 利用 了 色彩 空间 混合 的 原理 。 凑 近 看 ， 报 纸 上 的 图 像 和 文字 都 
是 由 一 些 密密麻麻 的 原色 点 组 成 的 。 但 是 拿 远 看 ， 这 些 墨 点 就 可 以 混合 出 颜色 过 渡 丰 富 、 真 实感 强 
烈 的 图 像 。 如 图 8-11 所 示 模 拟 了 这 种 现象。 


[Ey 


图 8-11 


[EE 


色彩 主要 分 为 两 大 类 : 有 彩色 和 无 彩色 。 有 彩色 是 指 诸如 红 、 绿 、 蓝 、 青 、 洋 红 和 黄 等 具有 “i 
相 ” 属 性 的 颜色 ;无 彩色 则 指 黑 、 白 和 灰 等 中 性 色 。 


有 彩色 是 指 我 们 能 够 看 到 的 所 有 色彩 ， 包 括 各 种 原色 、 原 色 之 间 的 混合 ， 以 及 原色 与 无 彩色 之 
间 的 混合 所 生成 的 颜色 ， 有 彩色 中 的 任何 一 种 颜色 都 具备 完整 的 “色相 ”“ 饱 和 度 ” 和 “明度 ”属性 ， 
如 


8-12 所 示 。 
彩色 是 指 黑 色 , 以 及 这 两 种 颜色 混合 而 成 的 各 种 深浅 不 同 的 灰色 。 无 彩色 不 具备 “色相 ” 


调 


性 ， 人 从 严格 意义 上 讲 ， 无 彩色 只 是 不 同 明度 的 具体 体现 ， 如 图 8-13 所 示 。 
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图 8-12 


(NasTER YOUR CMAGINATION 


图 8-13 
无 彩色 虽然 不 像 有 彩色 那样 多 姿 多 彩 ， 引 人 注目 ， 但 在 设计 中 却 有 着 无 可 取代 的 地 位 。 因 为 中 
性 色 可 以 和 任何 有 彩色 完美 地 搭配 在 一 起 ， 所 以 常 被 用 于 衔接 和 过 渡 多 种 “跳跃 ” 的 颜色 。 而 且 在 
日 常生 活 中 ， 我 们 所 看 到 的 颜色 都 多 多 少 少 包 含 一 些 中 性 色 的 成 分 ， 所 以 才 会 呈现 如 此 丰富 多 彩 的 
视觉 效果 。 


:3 不 同 的 色 系 © 


色 系 主要 分 为 原色 、 次 生 色 、 三 次 色 、 邻 近 色 、 互 补 色 和 对 比 色 等 。 正 确 理解 和 掌握 这 些 知 识 
有 利于 更 科学 高 效 地 配色 。 


ne 


原色 主要 包括 之 前 讲 过 的 光 的 三 原色 : 红 、 绿 、 蓝 ， 以 及 色 的 三 原色 : 青 、 洋 红 、 黄 。 这 6 种 
颜色 相互 以 不 同 的 比例 混合 可 以 生成 其 他 颜色 ， 但 本 身 无 法 由 其 他 颜色 混合 而 成 。 


将 任意 两 种 相 邻 的 原色 进行 混合 得 到 的 颜色 就 叫 作 次 生 色 。 依 据 这 个 定义 ， 分 别 将 光 的 三 原色 
和 色 的 三 原色 两 两 进行 混合 ， 可 以 得 到 : 


气 @ + 40-9 i@ :1@-E@ 
绿 @@ + 莫 伟 = 青 @ 洋红 铬 + 芮 时 = 红 合 
英 @ + 人 = 洋 I@ 黄 情 + 青 @@= 经 @ 


通过 上 面 的 公式 , 我 们 惊奇 地 发 现 ， 光 的 三 原色 两 两 相互 混合 , 得 到 的 次 生 色 正 是 色 的 三 原色 。 
而 色 的 三 原色 相互 混合 ， 也 正好 得 到 光 的 三 原色 。 我 们 可 以 使 用 下 图 的 色 环 帮助 记忆 ， 色 环 中 的 正 
三 角形 是 红 、 绿 、 蓝 ， 倒 三 角形 是 青 、 洋 红 、 黄 。 

此 外 ， 我 们 常 说 的 彩虹 的 7 种 颜色 : 赤 、 橙 、 黄 、 绿 、 青 、 蓝 、 紫 ， 也 是 通过 一 个 RGB 原色 和 
一 个 CMY 原色 间隔 排列 组 合 而 成 的 ， 如 图 8-14 所 示 。 
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三 次 色 是 指 由 原色 和 次 生 色 混 合生 成 的 颜色 ， 在 色 环 中 处 于 原色 与 次 生 色 之 间 。 由 于 红 、 绿 、 
蓝 和 青 、 洋 红 、 黄 互 为 次 生 色 ， 所 以 在 十 二 色 环 中 ， 除 这 6 种 原色 之 外 的 其 余 6 种 颜色 都 是 三 次 色 。 
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邻近 色 中 往往 都 包含 一 个 共有 的 颜色 ， 例 如 红色 、 玫 红色 和 洋红 色 ， 它 们 都 含有 大 量 的 红色 。 
在 色相 环 上 任 选 一 色 ， 与 此 色相 距 90” ， 或 者 彼此 相隔 五 六 个 数位 的 两 色 ， 即 为 邻近 色 。 邻 近 色 一 
般 有 两 个 范围 ， 绿 、 蓝 、 紫 的 邻近 色 大 部 分 在 冷色 范围 内 , 红 、 栖 、 黄 的 邻近 色 大 部 分 在 暖色 范围 内 ， 
如 图 8-15 所 示 。 


图 8-15 


凡 两 种 颜色 相互 混合 产生 白色 或 灰色 ， 则 称 其 中 一 种 颜色 为 另 一 种 颜色 的 互补 色 。 互 补 色 在 色 
环 上 总 是 处 在 一 条 直线 的 两 端 。 若 要 求 得 出 一 种 颜色 的 互补 色 ， 可 套用 下 列 公式 : 

R=(255-R) 

G=(255-G) 

B=(255-B) 

注 : 带 下 画 线 的 是 已 知 颜色 的 数值 。 

举例 说 明 : 

已 知 : 红色 ，RGB(255、0、0)， 
R=(255-255)=0 

| G=(255-0)=255 | 即 绿色 + 蓝 色 = 青色 
B=(255-0)=255 


ZE 


在 色相 环 中 相距 120” ， 或 者 120” 以 上 的 颜色 被 称 为 对 比 色 。 顾 名 思 义 ， 互 为 对 比 色 的 颜色 从 
视觉 上 给 人 一 种 对 立 的 感觉 。 事 实 上 ， 对 比 色 的 视觉 对 立 感 仅 次 于 互补 色 ， 如 图 8-16 所 示 。 


图 8-16 


色彩 的 视觉 心理 感受 5 


颜色 本 身 是 中 性 的 ， 没 有 任何 感情 色彩 ， 人 们 由 于 长 时 间 的 认 知 和 感受 自然 而 然 地 建立 起 一 套 
完整 的 、 对 于 不 同 颜色 的 心理 感受 

例如 ， 看 到 红色 就 会 联想 到 火 灼 的 热情 与 暴躁 看 到 黄色 就 会 联想 到 太阳 的 和 购 与 温暖 ， 看 到 
绿色 就 会 联想 到 小 草 的 清新 …… 了 解 不 同色 彩 的 意向 ， 可 以 帮助 我 们 通过 画面 正确 表达 各 种 情绪 。 


汪 色彩 的 径 重 人 | 


色彩 的 轻重 感 主要 通过 颜色 的 明度 来 体现 。 一 般 来 说 , 明度 比较 高 的 颜色 给 人 以 密度 小 、 重 量 轻 、 
漂浮 和 敏捷 的 感觉 ， 例 如 蓝天 、 白 云 、 羽 毛 和 彩虹 等 。 

明度 较 低 的 颜色 则 给 人 以 密度 大 、 重 量 大 、 下 沉 、 沉 稳 和 含蓄 的 感觉 例如 金属 、 皮 革 等 物体 ， 
如 图 8-17 所 示 。 


色彩 的 冷暖 
色彩 本 身 并 无 冷暖 之 分 ， 只 是 人 们 在 视觉 上 延伸 出 来 的 心理 感受 。 例 如 ， 看 到 红色 、 橙 色 和 黄 


色 就 会 联想 到 太阳 、 火 苗 、 烛 光 等 温暖 的 事物 ， 看 到 蓝 色 、 青 色 和 紫色 就 会 联想 到 冰雪 、 下 雨 、 海 
洋 等 冰凉 或 空旷 的 事物 ， 如 图 8-18 所 示 。 


Photoshop CC 网 站 UI 设计 全 程 揭秘 (第 2 版 ) 


图 8-18 
色彩 的 冷暖 不 仅仅 体现 在 固定 的 色相 上 , 还 体现 在 色相 的 倾向 性 , 云彩 是 这 一 现象 最 经 典 的 体现 。 
画 朝霞 时 ， 为 了 表现 出 清冷 的 感觉 ， 往 往 会 加 入 一 些 玫 红色 。 而 在 画 晚霞 时 ， 则 会 添 入 大 量 的 楼 红 
色 和 黄色 ， 用 来 变现 浓郁 而 热烈 的 氛围 。 


B23 乡 的 软 硬 2 
色彩 的 色相 与 软 硬 感 没有 太 大 的 关系 ， 但 是 不 同 的 明度 和 饱和 度 会 给 人 强烈 的 软 硬 差距 感 。 一 
股 来 说 ， 高 明度 、 高 饱和 度 的 颜色 看 起 来 更 加 和 柔软， 例如 云 休 、 棉 花 、 布 料 和 花 准 有 等。 低 明度 、 低 
纯度 的 颜色 则 给 人 感觉 坚硬 厚重 ， 例 如 钢铁 、 汽 车 和 乌云 等 ， 如 图 8-19 所 示 。 


图 8-19 


暖色 和 高 明度 的 颜色 总 会 给 人 以 蓬松 、 和 柔软 、 上 升 和 轻 蒜 标的 感觉 ， 因 此 有 强烈 的 膨胀 感 。 
冷色 和 低 明 度 的 颜色 则 会 给 人 以 冰冷 、 坚 硬 、 内 你 和 沉稳 的 感觉 ， 因 此 有 后 退 和 收缩 的 感觉 ， 如 
8-20 所 示 。 


高 明度 、 高 纯度 、 高 对 比 度 的 颜色 会 给 人 以 活泼 、 跳 跃 、 朝 气 蓬勃 的 感觉 ， 低 纯度 、 低 明度 的 
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颜色 则 会 给 人 以 庄重 、 沉 静 、 内 你 和 正式 的 感觉 。 


般 来 说 ， 儿 童 类 插画 多 选 


天 蓝 、 橙 黄 、 黄 色 、 粉 红 和 嫩绿 等 较为 活泼 的 颜色 ， 以 契合 儿童 


活泼 可 爱 的 天 性 。 而 一 些 珠宝 、 汽 车 和 高 端 电子 产品 则 会 选用 黑 、 白 、 灰 、 深 蓝 、 深 红 等 颜色 ， 以 


体现 产品 的 深邃 感 和 品质 感 ， 如 医 


8-21 所 示 。 


决定 色彩 兴奋 程度 的 因素 为 色相 和 饱和 度 。 总 体 来 说 ， 蓝 色 、 青 色 和 和 紫 色 等 低 饱和 度 的 冷 


色 会 给 人 以 沉静 的 感觉 ; 红色 、 林 


色 和 黄色 等 高 饱和 度 的 暖色 会 给 人 以 兴奋 的 感觉 , 如 图 8-22 所 示 。 


饱和 度 对 于 色彩 的 华丽 感 和 朴素 感 有 很 大 的 影响 。 一 般 来 说 ， 高 饱和 度 的 红色 、 玫 红 和 紫红 等 
色彩 会 给 人 以 华丽 、 高 贵 和 夸张 的 黑 
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感觉 ， 低 饱和 度 的 棕色 、 土 黄 、 黑 、 白 、 灰 等 色彩 则 会 给 人 以 朴素 、 


柔和 及 复古 的 感觉 ， 如 图 8-23 所 示 。 
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网 页 配色 标准 DB | 


网 页 的 受众 很 广 ， 为 了 保证 一 个 页 面 在 大 部 分 用 户 的 屏幕 上 能 够 正常 显示 ， 所 以 对 网 页 配色 有 


一 套 严格 的 标准 。 设 计 师 只 要 按照 标准 选用 颜色 ， 就 能 够 保证 用 户 看 到 的 实际 页 面 效果 和 自己 设计 
出 的 效果 同样 出 彩 。 


Web 安全 颜色 


网 页 中 的 颜色 显示 情况 会 受到 不 同 因素 的 影响 ， 其 中 最 重要 的 就 是 用 户 屏幕 的 显示 效果 。 即 使 
为 自己 的 网 页 选用 最 正确 、 最 完善 的 配色 方案 ， 但 实际 显示 效果 依然 会 因为 显示 器 的 不 同 而 不 同 。 

那么 如 何 才能 解决 这 个 问题 呢 ? 为 了 解决 不 同 显示 器 颜色 显示 效果 不 统一 的 问题 ， 人 们 一 致 通 
过 了 一 组 在 所 有 浏览 器 中 都 类 似 的 Web 安全 颜色 。 

Web 安全 色 可 以 用 相应 的 十 六 进 制 值 00、33、66、99、CC 和 FF 来 表达 三 原色 (RGB) 中 的 每 一 种 。 
也 就 是 说 ， 可 能 的 输出 结果 包括 6 种 红色 调 、6 种 绿色 调和 6 种 蓝 色调 。 

6x6x6 的 结果 就 是 216 种 特定 的 颜色 。 这 些 颜 色 可 以 被 安全 地 应 用 于 网 页 中 ， 而 不 需要 担心 
在 不 同 屏幕 中 的 显示 效果 出 现 偏差 ， 如 图 8-24 所 示 。 


在 Photoshop 中 ， 用 户 可 以 在 “ 色 板 ”面板 中 载 入 216 种 Web 安全 颜色 ， 以 确保 应 用 到 网 页 
中 的 颜色 全 部 可 以 被 正常 显示 。 执行 “窗口 ”>“ 色 板 ” 命 令 , 打开 “ 色 板 ” 面 板 。 单 击 面板 右上 方 
的 四 按钮 ， 在 弹出 的 面板 菜单 中 选择 “Web 安全 颜色 ”命令 ， 即 可 使 用 Web 安全 色 替 换 色 板 中 的 
默认 颜色 ， 如 图 8-25 所 示 。 
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单 击 “ 色 板 ” 面板 中 的 一 个 小 色 块 , 即 可 快速 将 其 指定 为 新 的 “前 景色 ”或 “背景 色 ”。 单 击 面板 底部 的 国 按 钮 ， 
可 使 用 当前 前 景色 创建 新 的 颜色 样本 ; 单 击 蔷 按钮 可 以 删除 指定 的 颜色 样本 。 
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在 对 网 页 进行 配色 时 , 要 做 到 整体 协调 统一 , 重点 色 突出 ,还 要 巧妙 合理 地 过 渡 几 种 冲突 的 颜色 。 
此 外 还 要 特别 注意 文字 的 颜色 ， 最 好 能 够 选择 与 背景 反差 大 的 颜色 ， 这 样 更 利于 阅读 。 


和 色彩 搭配 的 原则 


对 网 页 进行 配色 时 ， 用 户 需要 遵循 以 下 3 个 基本 原则 ， 方 便 用 户 更 好 地 完成 网 页 配色 。 下 面 分 
别 详细 进行 介绍 。 


1. 整体 色调 协调 统一 》 


任何 形式 的 设计 都 要 注意 整体 色调 的 协调 一 致 性 ， 网 页 设计 同样 如 此 。 只 有 全 面 控制 好 构成 页 
面 的 色彩 的 色相 、 饱 和 度 、 明 度 和 面积 关系 ， 才 能 使 最 终 页 面 在 视觉 上 呈现 出 高 度 协调 一 致 的 效果 ， 
从 而 达到 传达 信息 的 目的 ， 如 图 8-26 所 示 。 


on departure 


图 8-26 


了 2. 配色 要 有 重点 色 》 


配色 时 ， 我 们 可 以 将 某 种 颜色 作为 页 面 的 重点 色 ， 重 点 色 应 该 是 比 背 景色 更 强烈 鲜艳 的 色彩 ， 
最 好 能 以 小 面积 的 形式 出 现 ， 以 营造 出 整体 版 式 灵动 活跃 的 效果 ， 从 而 吸引 浏览 者 的 注意 。 
不 过 在 布局 重点 色 时 ， 要 特别 注意 色 块 与 其 他 颜色 的 协调 程度 。 如 果 版 面色 彩 过 于 突 元 ， 就 要 


3. 调和 及 衔接 不 协调 的 颜色 


当 页 面 中 包含 两 种 或 两 种 以 上 的 不 协调 颜色 时 ， 就 需要 使 用 其 他 颜色 进行 调和 及 过 渡 。 通 常 可 
以 使 用 两 种 方法 调和 不 协调 的 颜色 ， 一 是 使 用 大 面积 的 黑 、 白 、 灰 等 中 性 色 进行 调和 ， 二 是 使 用 两 
种 对 比 色 中 间 的 几 种 颜色 平滑 过 渡 二 者 ， 如 图 8-28 所 示 。 
以 图 8-29 所 示 的 页 面 为 例 ， 页 面 中 的 洋红 色 和 青色 在 色 环 中 相距 120”， 属 于 对 比 色 。 洋 红 和 
蓝 色 ， 蓝 色 和 青色 在 色 环 中 相距 60”， 属 于 邻近 色 

为 了 消除 洋红 和 两 种 蓝 色 的 对 立 感 ， 页 面 中 添加 了 大 量 的 白色 对 颜色 进行 平衡 ， 而 且 使 用 三 
来 分 割 各 种 色彩 的 形状 ， 不 仅 成 功 抵消 了 色彩 的 跳跃 感 ， 还 使 整个 版 面 妙 趣 横生 。 


图 8-29 


确定 网 页 主题 色 © 
不 同 的 色彩 具有 不 同 的 意象 ， 红 色 代 表 热 烈 奔 放 ， 黄 色 代表 温暖 活泼 ， 蓝 色 使 人 沉静 忧郁 , 黑 
白 、 灰 给 人 以 高 端 专业 的 感觉 …… 
确定 主题 色 时， 一 定 要 遵循 整体 协调 统一 、 局 部 重点 突出 的 原则 ， 仔 细 考 虑 页 面 想 要 传达 出 
信息 和 情感 ， 选 择 最 合适 的 一 种 或 两 种 颜色 作为 整体 色调 ， 如 图 8-30 所 示 。 
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图 8-30 
虽然 网 页 设计 对 于 颜色 的 使 用 数量 没有 任何 限制 ， 但 为 了 整体 效果 的 协调 一 致 性 ， 建 议 不 要 使 
用 两 种 以 上 的 主题 色 。 有 企业 形象 识别 系统 的 ， 更 应 该 按照 规定 的 企业 标准 色 进 行 页 面 设计 
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文字 是 组 成 页 面 的 重要 元 素 之 一 ， 它 的 主要 功能 就 是 准确 地 传达 各 种 信息 。 相 较 于 图 片 来 说 ， 
文字 配色 应 该 直观 明确 ， 易 于 识别 ， 具 有 很 强 的 可 读 性 ， 如 图 8-31 所 示 。 
页 面 中 的 文字 分 为 两 种 ， 标 题 文字 和 正文 文字 。 对 于 标题 文字 而 言 ， 可 以 将 其 作为 页 面 的 装饰 
性 元 素 ， 按 照 页 面 整体 颜色 效果 来 选用 颜色 。 对 于 正文 来 说 ， 由 于 字体 很 小 ， 所 以 要 避免 使 用 与 背 
景 过 于 接近 的 颜色 ， 以 免 降低 文字 的 可 识别 和 可 阅读 性 。 
总 体 来 说 ， 正 文 应 该 选用 背景 的 补 色 或 对 比 色 ， 例 如 黑 底 白字 、 白 底 黑 字 和 蓝 底 白 字 等 。 如 果 
需要 设置 和 背景 说 近 的 文字 颜色 ， 以 强化 页 面 整 体 的 协调 感 ， 那 么 可 考虑 拉 开 文字 颜色 和 背景 颜 
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的 明度 和 饱和 度 ， 例 如 浅 粉 背景 深 棕 字 ， 或 者 浅 青 背 景 青 灰 字 等 ， 这 样 也 比较 容易 区 分 文字 和 背景 ， 
如 图 8-32 所 示 。 
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图 8-32 


网 页 风格 与 配色 


不 同 的 颜色 往往 能 够 引起 人 们 不 同 的 情感 反应 ， 这 就 是 所 谓 的 色彩 联想 。 根 据 页 面 所 要 传达 出 
的 具体 情感 合理 选用 不 同 的 颜色 ， 是 每 个 网 页 设计 师 必 须 具备 的 职业 素养 。 正 确 合理 地 使 用 相应 的 


颜色 布局 页 面 ， 可 以 使 制作 出 的 页 面 更 专业 、 更 美观 ， 而 置 科学 的 配色 原理 于 不 顾 ， 胡 乱用 色 ， 只 
能 制作 


出 稚 拙 俗气 的 作品 。 


暖色 调配 色 

暖色 主要 包括 红色 、 禁 红色、 黄色 、 禁 黄色 和 黄 绿 色 等 色彩 。 以 暖色 为 主 色调 的 页 面 能 够 传达 
给 受众 一 种 健康 阳光 、 积 极 向 上 、 温 暖和 网 、 热 情 奔 放 的 情感 。 一 般 来 说 ， 餐 饮 类 和 儿童 类 网 站 往 
往 更 偏爱 暖色 调 的 页 面 效果 ， 如 图 8-33 所 示 。 
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图 8-33 
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冷色 调配 色 。 (@ 


冷色 主要 包括 绿 蓝 色 、 蓝 色 、 青 色 、 青 蓝 色 和 紫色 等 色彩 。 以 冷色 为 主 色调 的 页 面 一 般 会 传达 
给 浏览 者 理智 、 冷 静 、 高 科技 和 清爽 的 感觉 。 
一 般 来 讲 ， 很 多 高 端正 规 的 企业 和 大 部 分 的 电子 产品 企业 会 选用 冷色 调 作为 网 站 的 主 色 调 ， 尤 


其 是 青色 和 蓝 色 ， 以 强化 企业 良好 的 形象 ， 如 图 8-34 所 示 。 


对 于 色相 环 中 冷暖 色 交界 处 的 颜色 来 说 ， 我 们 很 难 断 定 它们 到 底 是 冷色 还 是 暖色 例如 绿色 ， 由 黄色 (暖色 ) 和 
青色 (冷色 ) 混合 而 成 ， 当 绿色 中 的 黄色 居多 时 ， 它 是 暖色 。 当 绿色 中 的 青色 居多 时 ， 它 就 属于 冷色 


二 稳定 = 安静 风格 的 配色 


一 般 来 说 ， 低 饱和 度 、 低 明度 的 色彩 会 传达 出 一 种 稳定 安静 的 感觉 ， 例 如 深蓝 、 深 灰 和 黑色 等 。 
很 多 奢侈 品牌 和 高 端 电子 产品 企业 都 会 选择 这 些 深 色 系 的 颜色 作为 网 页 的 主 色调 ， 以 强调 出 企业 的 
沉稳 可 靠 和 严谨 含蓄 ， 如 图 8-35 所 示 。 


Ee 发 挥 白 色 效果 的 配色 ”他 


色 属于 中 性 色 ， 它 可 以 完美 地 和 任何 颜色 搭配 在 一 起 使 用 而 不 会 产生 任何 冲突 感 。 的 包 
容 性 很 强 , 本身 也 没有 冷暖 的 倾向 , 因此 常 被 用 于 调和 几 种 对 立 的 颜色 , 使 整体 版 面 和 色调 更 加 平衡 。 
色 与 暖色 搭配 在 一 起 会 显得 温暖 平和 ; 与 冷色 搭配 在 一 起 会 显得 冰凉 理智 ， 和 低 纯 度 的 颜色 
搭配 在 一 起 也 会 显得 低调 而 有 魅力 ， 如 图 8-36 所 示 。 


和 WISTIA 为 


2 


图 8-36 


2 高 彩 度 的 配色 @@ 

饱和 度 比较 高 的 色彩 往往 会 传递 给 受众 一 种 活泼 好 动 、 张 扬 个 性 、 热 情 不 虹 和 古 灵 精 怪 的 感觉 。 
高 彩 度 的 色彩 更 容易 吸引 用 户 的 注意 力 ， 所 以 一 般 网 页 中 的 Logo、 按 钮 和 图 标 等 零散 细碎 的 元 素 才 
会 采用 。 如 果 要 大 面积 使 用 ， 对 设计 师 是 一 个 不 小 的 挑战。 


一 般 来 说 ， 儿 童 类 网 站 和 设计 公司 的 网 站 更 喜欢 采用 高 彩 度 配 色 方案 ， 以 体现 出 活泼 可 爱 和 个 
性 奔放 的 感觉 ， 如 图 8-37 所 示 。 


Relnvent 


三 一 


图 8-37 


8.6 匡 影 响 网 站 配色 的 因素 5 


在 对 网 页 进行 配色 时 ， 往 往 会 受到 以 下 4 个 因素 的 影响 : 行业 特征 、 产 品 所 处 的 生命 周期 、 色 
彩 的 意向 和 个 性 ， 以 及 浏览 者 的 偏好 。 


根据 行业 特征 选择 网 页 配色 


通常 人 们 在 想起 任何 事物 时 ， 都 会 自然 而 然 地 将 其 与 性 质 相 一 致 的 色彩 对 号 入 座 ， 这 就 是 联想 
的 作用 。 例如 想到 咖啡 , 就 会 联想 到 棕色 的 醇厚 温暖 ， 想 到 医院 , 就 会 联想 到 白色 和 蓝 色 的 冰凉 冷静 。 
在 设计 和 制作 网 页 之 前 ， 首 先 应 该 仔细 调查 和 收集 各 种 数据 资料 ， 以 科学 客观 的 分 析 方 法 确定 
出 符合 本 行业 形象 的 色彩 。 
如 表 8-1 所 示 为 根据 不 同行 业 的 特点 归纳 出 来 的 各 行业 形象 的 代表 色 。 
表 8-1 各 行业 形象 代表 色 
代表 行业 
服装 百货 、 服 务 行业 、 餐 饮 行业 、 医 疗 药品 、 数 码 家 电 
餐饮 行业 、 建 筑 行业 、 娱 乐 行业 、 服 装 百货 、 工 作 室 
儿童 、 餐 饮 行业 、 楼 盘 、 工 作 室 、 饮 食 营养 、 农 业 、 房 产 家 居 
教育 培训 、 水 果蔬 菜 、 工 业 设计 、 印 刷 出 版 、 交 通 旅游 、 医 疗 保健 、 环 境 保护 、 音 乐 、 园 林 


El 
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( 续 表 ) 


、 水 族 馆 、 企 业 公 司 
生物 科技 、 财 经 证 券 
爱情 婚姻 、 女 性 用 品 、 化 妆 品 、 美 容 保养 、 社 区 论坛 、 奢 侈 品 
、 爱 情 婚姻 、 化 妆 品 、 美 容 保养 
、 电 博客 日 记 、 完 物 玩 具 、 运 输 交通 、 建 筑 装潢、 律师 、 企 业 顾问 
、 艺 术 、 时 尚 、 赛 车 跑车 
、 银 行 、 珠 宝 、 电 子 机 械 、 医 疗 保健 、 电 子 商务 、 自 然 科学 、 生 物 科技 


根据 生命 周期 选择 网 页 配色 《 


产品 的 生命 周期 是 指 从 该 产品 进入 市 场 , 直到 被 市 场 淘汰 的 整个 过 程 。 产 品 生命 周期 包括 导入 期 、 
发 展期 、 成 熟 期 和 衰退 期 。 可 以 根据 产品 所 处 不 同 周期 时 市 场 的 反应 和 企业 所 要 达到 的 营销 宣传 效果 ， 
来 确定 网 页 的 配色 方案 。 


处 在 导入 期 的 产品 一 般 都 是 刚 上 市 ， 还 未 被 消费 者 所 熟知 。 为 了 加 强 宣传 力度 ， 刺 激 消费 者 的 
感官 ， 增 强 消费 者 对 产品 的 记忆 度 ， 可 以 选用 艳丽 的 单 色 作为 主 色调 ， 将 产品 的 特性 清晰 而 直观 地 
诠释 给 用 户 。 如 图 8-38 所 示 模 拟 了 这 种 现象 。 


ONUINE 


、 进 出 口 贸易 、 航 空 、 冷 饮 、 旅 游 、 工 业 化 工 、 航 海 、 新 闻 媒体 、 
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处 在 发 展期 的 产品 一 般 已 为 消费 者 所 熟知 , 市 场 占有 率 也 开始 相对 提高 , 并 开始 有 竞争 者 出 现 。 
为 了 体现 企业 与 其 他 同类 行业 的 差异 性 ， 这 一 阶段 的 网 页 应 该 选择 比较 时 尚 和 鲜艳 的 颜色 作为 主 色 
调 ， 如 图 8-39 所 示 。 


图 8-38 
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一 加 © 入 避 后 志 如 


图 8-39 


相对 于 导入 期 而 言 ， 发 展期 的 页 面 设计 颜色 可 以 更 加 丰富 多 彩 ， 版 式 也 可 以 更 加 随意 灵活 。 


处 在 成 熟 期 的 产品 一 般 已 经 有 了 比较 客观 、 稳 定 的 市 场 占有 率 ， 消 费 者 对 产品 的 了 解 也 已 经 很 
深刻 ， 并 且 有 了 一 定 的 忠诚 感 。 而 此 时 市 场 也 已 经 接近 饱和 ， 企 业 通 常 无 法 再 通过 寻找 和 开发 新 市 
场 来 提高 市 场 占有 率 。 

此 时 企业 宣传 的 重点 应 该 是 维持 现 有 顾客 对 品牌 的 信赖 感 和 忠诚 感 ， 而 不 是 吸引 新 用 户 ， 所 以 
应 该 选用 一 些 比较 安静 、 沉 稳 的 颜色 作为 网 页 的 主 色调 ， 如 图 8-40 所 示 。 
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图 8-40 


ZE 


当 产 品 处 于 衰退 期 阶段 时 ， 消 费 者 对 产品 的 忠诚 度 和 新 鲜 感 都 会 有 所 降低 ， 他 们 会 开始 寻找 其 
他 的 新 产品 来 满足 需求 ， 最 终 导致 市 场 份额 不 断 下降 。 

这 一 阶段 的 主要 宣传 目标 就 是 保持 消费 者 对 产品 的 新 鲜 感 ， 因 此 网 页 所 采用 的 颜色 应 该 是 比较 
独特 的 颜色 ， 或 者 是 流行 色 ， 对 产品 形象 进行 重新 改进 和 强化 ， 如 图 8-41 所 示 。 


正如 前 面 反复 提 到 过 的 ， 人 们 看 到 每 种 不 同 的 颜色 后 ， 总 是 会 下 意识 地 寻找 生活 中 常见 的 同类 
颜色 事物 ， 再 通过 具象 的 物体 引申 出 抽象 的 情感 。 例 如 ， 看 到 红色 会 联想 到 太阳 、 火 焰 ， 使 人 们 感 
受到 温暖 和 热情 ; 看 到 蓝 色 就 会 联想 到 天 空 、 海 洋 和 液体 ， 进 而 感受 到 清新 、 空 片 和 忧郁 。 
生活 环境 的 不 同 ， 并 非 所 有 人 对 色彩 的 感受 和 认 知 都 一 致 ， 但 仍然 可 以 找 出 大 多 数 人 对 于 
色彩 认 知 的 相对 一 致 性 ， 并 有 效 运用 这 些 心理 感受 ， 使 网 页 所 要 表达 的 信息 和 情感 正确 传递 给 大 部 
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分 的 受众 ， 如 表 8-2 所 示 。 


表 8-2 色彩 心理 认 知 
具象 联想 抽象 联想 


太阳 、 火 焰 、 花 条、 血 、 草 果 、 栅 桃 、 草 攻 、| 热 情 、 热 烈 、 兴奋、 勇气 、 个 性 张扬 、 暴 踩 、 
残忍 …… 


生机 莲 勃 、 希 望 、 新 鲜 、 放 松 、 环 保 、 年 轻 、 


轻松 慨 意 、 空旷 清新 、 自 由 、 清 爽 、 凉 殉 、 


、 医 衣 草 、 紫 芯 花 、 花 朵 、 华丽 、 高 贵 、 神 秘 、 浪漫 、 美 艳 、 忧郁 、 政 间 、 


深沉 、 神 秘 、 黑 暗 、 压 抑 、 压 迫 、 厚重 、 那 恶 、 


、 墨 水 、 乌 获 、 禁 闭 室 


云 休 、 棉 花 、 羊 毛 、 雪 、 纸 、 婚 幼 、 牛 奶 、| 洁净 、 清 新 、 纯 洁 、 圣 洁 、 柔 和、 正义 、 
斑马 线 …… 冰冷 … 


金属 、 阴 天 、 水 泥 、 烟 雾 朴素 、 模 糊 、 消 极 、 阴 沉 、 优 和 柔 寡 断 …… 


根据 受众 色彩 偏好 选择 网 页 配色 


一 个 全 新 的 产品 在 上 市 之 前 , 必然 已 经 确定 了 目标 群体 范围 , 这 个 范围 可 以 大 致 通过 年 龄 、 性 别 、 
地 区 、 经 济 状况 和 受 教育 程度 等 因素 来 确定 。 

在 确定 网 页 主题 色 时 ， 也 需要 对 不 同人 群 所 偏爱 的 颜色 做 一 些 了 解 ， 以 制作 出 更 符合 受众 胃 
的 页 面 ， 从 而 达到 预期 的 宣传 效果 。 


1 不 同性 别人 群 对 色彩 的 偏好 》 


表 8-3 不 同性 别人 群 对 色彩 偏好 


性 别 


男性 


> ne 


( 续 表 ) 


色彩 选择 


0~12( 儿童 ) 


36~50( 中 年 ) 


红色 、 黄 色 、 绿 色 等 
明艳 温暖 的 颜色 


O00 
O00 


色 等 高 纯度 高 明度 色彩 | 色 ， 还 有 中 性 色 


3. 不 同 国家 和 地 区 对 色彩 的 偏好 /] 


表 8-5 不 同 国家 和 地 区 对 色彩 偏好 


红色 、 栓 色 、 黄 色 和 青 | 纯度 和 明度 适中 的 颜 | 低 纯 度 、 低 明度 的 颜 


色 ， 稳 重 严肃 的 颜色 


有 厌恶 的 颜色 

中 国 红色 、 黄 色 、 蓝 黑色 、 和 白色 、 灰 OO 
色 等 艳丽 的 颜色 色 等 黯淡 的 颜色 

灰色 、 白 色 、 粉 

他 红色 黄色 、 黑 绿色 © ， 
红色 、 橙 色 、 黄 晤 

德 色 等 温暖 明艳 的 色 、 茶 色 、 © © © 
颜色 

马来西亚 红色 、 绿 色 黄色 © 

新 加 坡 红色 、 绿 色 黄色 © 

日 本 全 紫色 、 红 ee © 
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( 续 表 ) 
国家 地 区 喜欢 的 颜色 厌恶 的 颜色 
-er OO 99 
“| | “上 
红色 、 黄 色 、 绿 黑色 、 紫 色 、 紫 
” |*"*"O00:" "O00 
墨西哥 白色 、 绿 色 针 ， 紫色 、 黄 色 © © 


— 


9 所 这 网 页 的 版 式 和 布局 。 “2 


La ss PRNIMES ETE 
> 一 |# 3 2 寺 2OL 
司 Nm -MI ， 


[9.11 常见 的 网 页 布局 方式 只 


人 
常见 的 网 页 布局 方式 主要 有 “ 国 " 字 型 、 拐 角 型 、 标 题 正文 型 、 左 右 框架 型 、 上 下 框架 型 、 封 


加 


型 
、 


“ 国 


" 字 型 网 页 通常 会 在 页 面 最 上 面 放置 Logo、 导 航 和 横幅 广告 条 。 接 下 来 就 是 网 站 的 主体 内 容 ， 
分 为 左 、 中 、 右 三 大 块 。 页 面 最 下 面 是 网 站 的 一 些 基本 信息 、 联 系 方式 和 版 权 声 明 等 。 

一 些 大 型 网 站 通常 会 采用 这 种 结构 罗列 大 量 的 信息 和 产品 。 如 图 9-1 所 示 为 “ 国 ” 字 型 网 页 的 
图 解 和 实际 应 用 效果 。 


Logo EC 导航 栏 


PE 让 


体 右 


Es ee 


图 9-1 


DOMINOW 


主体 左 


版 底 


拐角 型 结构 与 “ 国 ” 字 型 结构 实际 上 很 接近 ， 只 是 在 形式 上 略 有 区 别 。 页 面 上 方 同样 是 Logo、 
导航 和 广告 条 ， 页 面 中 间 部 分 左 侧 是 一 列 略 窒 的 菜单 或 链接 ， 右 侧 是 比较 宽 的 主体 部 分 。 页 面 下 方 
也 是 一 些 网 站 的 辅助 信息 和 版 权 信息 等 内 容 。 
拐角 型 布局 也 是 比较 常用 的 布局 方式 ， 如 图 9-2 所 示 为 拐角 型 页 面 的 图 解 和 实际 应 用 效果 。 
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Logo ] [ 导航 栏 
| 广告 条 
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了 TTT: 
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鲁 站 晶 口 

版 底 Se 

图 9-2 


4 标题 正文 型 一 (@ 


这 种 类 型 的 布局 方式 更 像 是 杂志 的 排版 方式 ， 页 面 最 上 方 是 标题 或 一 些 类 似 的 元 素 ， 中 间 是 正 


文部 分 ,最 下 面 是 一 些 版 底 信息 。 我们 常用 的 搜索 引擎 类 网 站 和 注册 页 面 基本 都 采用 这 种 布局 方式 。 


如 图 


9-3 所 示 为 标题 正文 型 布局 方式 的 图 解 和 实际 应 用 效果 。 
党 TITLE 荐 cevis@pros 
正文 上 
版 底 ES 


图 9-3 


右 侧 
构 的 


引 


208 


左右 框架 型 结构 的 页 面 通常 会 在 左 侧 放置 一 列 文字 链接 ， 有 时 最 上 面 会 有 标题 或 Logo， 页 面 的 
则 是 正文 或 主体 部 分 ， 大 部 分 的 论坛 都 采用 这 种 布局 方式 。 如 图 9-4 所 示 分 别 为 左右 框架 型 结 
图 解 和 具体 应 用 效果 。 


导航 栏 


主体 


和 
链接 


>》 ss mens 


上 下 框架 型 结构 与 左右 框架 型 
结构 类 似 ， 区 别 仅 限于 上 下 框架 型 
页 面 的 文字 链接 在 上 方 ， 正 文 和 主 
体 部 分 在 下 方 ， 如 图 9-5 所 示 。 


封面 型 布局 的 页 面 往往 会 直接 
用 一 些 极 具 设 计 感 的 图 像 或 动画 
为 网 页 背景 ， 然 后 添加 一 个 简单 
“进入 ”按钮 就 是 全 部 内 容 了 。 

布局 方式 十 分 开放 自由 ， 如 果 
得 恰到好处 ， 会 给 用 户 带 来 十 
赏心悦目 的 感觉 , 如 图 9-6 所 示 。 


邮 洲 喇 丛 窜 


图 9-6 
动画 型 布局 方式 与 封面 型 类 似 ， 
是 采用 了 目前 流行 的 动画 。 相 较 
图 像 来 说 ， 动 画 型 布局 集 画 面 与 
声音 于 一 体 ， 不 仅 可 以 表现 更 多 的 
息 和 内 容 ， 还 能 更 好 地 泻 染 页 面 
的 活跃 气氛 。 儿 童 类 网 站 和 设计 类 
网 站 喜欢 采用 这 种 布局 方式 作为 首 


页 ， 如 图 9-7 所 示 。 


变化 型 结构 是 指 同 时 使 用 到 上 
面 的 几 种 布局 方式 ， 或 几 种 不 同方 
式 的 变形 。 如 图 9-8 所 示 的 页 面 ， 
在 视觉 效果 上 很 接近 左右 框架 型 结 
构 的 变化 形式 ， 但 实际 上 采用 的 却 
是 上 下 框架 型 结构 。 


Photoshop CC 网 站 UI 设计 全 程 揭秘 (第 2 版 ) 


文字 在 网 页 中 的 作用 p 


文字 和 图 像 是 网 页 中 最 主要 、 最 基本 的 两 大 元 素 。 就 信息 传递 的 效果 而 言 ， 图 片 虽然 更 善于 吸 


引 注意 力 ， 但 却 容易 引发 歧义 ， 而 文字 却 不 会 存在 这 种 问题 。 总 体 而 言 ， 文 字 在 页 面 中 的 作用 主要 
体现 在 明确 性 、 易 读 性 和 美观 性 3 个 方面 。 


< 马 豆 昌 明确 性 9 
有 _ ee 


文字 是 通过 特定 的 点 、 横 、 竖 和 


圆 弧 结构 组 合 而 成 的 ， 是 不 可 变 的 。 ”只 he ea 
比 起 图 像 来 说 ， 文 字 传达 信息 的 效果 [< 
更 具有 明确 性 和 固定 性 ， 所 以 人 们 很 2 。 


We make webs 
And thi bout i 


喜欢 采用 图 文 结 合 的 方式 来 传达 各 种 
信息 。 

先 使 用 图 像 引起 浏览 者 感官 上 的 
注意 ， 再 配合 文字 清晰 而 明确 地 传达 
出 想 要 表达 的 含义 和 信息 ， 如 图 9-9 
所 示 。 


2 易 恋 性 9 

文字 的 合理 编排 设计 可 以 大 大 
提高 页 面 的 易 读 性 。 一 般 来 说 ， 对 于 
一 些 过 粗 、 过 细 ， 或 者 字形 结构 过 于 


模糊 的 文字 来 说 ， 用 户 需要 花 更 多 的 

时 间 去 办 认 ， 这 就 在 无 形 中 降低 了 页 WELCOME T0 HOLIVE 

面 的 可 读 性 。 此 外 ， 为 文字 选用 与 背 Ea a E | 
六 大 人 部 可 由 、 ploring why technology is essentia 

景 色 反 差 较 大 的 颜色 也 可 以 增强 易 读 for business and economic growth 

性 ， 如 图 9-10 所 示 。 


图 9-10 
近 些 年 来 ， 随 着 人 们 审美 情趣 的 
不 断 提 升 ， 浏 览 者 对 网 站 页 面 的 美观 fl 
度 也 有 了 更 高 的 要 求 ， 这 就 要 求 设计 1 
师 对 页 面 中 存在 的 每 个 元 素 都 要 精心 
制作 ， 文 字 就 是 最 好 的 例子 。 

很 多 设计 师 都 乐此不疲 地 使 用 4 
点 、 线 条 、 色 块 ， 甚 至 图 像 来 装饰 标 SEE 
题 文字 ， 力 求 使 它 看 起 来 更 酷 ， 有 些 
网 页 上 的 文字 特效 之 精美 程度 简直 令 
人 了 叹为观止， 如 图 9-11 所 示 。 Er Tev re 

图 9-11 
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网 页 文字 的 设计 原则 2 


如 果 能 够 合理 编排 与 设计 网 页 中 的 文字 ， 那 么 除了 帮助 准确 传达 主题 信息 之 外 ， 还 能 起 到 很 好 
的 美化 整体 版 面 的 效果 。 总 体 来 说 ， 对 网 页 中 的 文字 进行 设计 时 ， 应 该 遵循 以 下 两 条 原则 ， 可 读 性 


和 艺术 化 。 


天 2 可 读 作 ”各 

文字 在 网 页 中 的 主要 作用 就 是 有 效 传达 设计 者 的 意图 和 相关 的 信息 ， 
设计 首先 要 达成 的 目标 。 通 常 可 以 通过 控制 字符 串 的 3 个 属性 来 调整 文字 
字号 和 行距 。 


了 1. 字体 


字体 的 选择 无 论 对 于 任何 形式 的 设计 来 说 都 是 一 门 大 学 问 ， 不 过 对 于 


因此 保证 可 读 性 就 是 文字 
的 可 读 性 ， 分 别 为 字体 、 


网 页 中 的 正文 来 说 ， 这 倒 


不 是 一 件 太 令 人 头疼 的 事情 。 为 了 使 大 篇 幅 的 文字 更 易于 辨认 和 阅读 ， 同 时 能 够 在 所 有 用 户 的 计算 
机 上 正常 显示 ， 默 认 中 文 页 面 中 的 正文 部 分 一 律 使 用 黑体 、 宋 体 或 楷体 等 常见 的 系统 字体 。 


2. 字号 


字号 决定 了 文字 的 大 小 。 对 于 中 文 网 页 而 言 ， 页 面 中 的 正文 通常 为 12 
题 一 类 的 文本 允许 放大 到 14 ~ 16 像素 ， 如 图 9-12 所 示 。 


推荐 国内 国际 任 乐 体育 科技 财经 汽车 游戏 直播 到 时 尚 


像素 的 宋体 ， 导 航 或 小 标 


女性 ”历史 


奋力 开创 新 时 代 退 役 军人 工作 新 局 面 习近平 对 巩固 国防 和 强 军 提出 明确 要 求 >14 像 来 


“济南 大 爷 " 厉 害 了 ! 再 出 手 救 起 汤水 者 ， 这 一 次 是 游泳 抽筋 的 ~ 14 像 素 


! 


图 9-12 


行距 的 变化 不 仅 会 对 文本 可 读 性 产生 影 
响 ， 还 会 对 整体 版 面 效 果 产 生 很 大 的 影响 。 
一 般 来 说 ， 正 文 的 行距 应 该 接近 字体 尺寸， 
如 图 9-13 所 示 。 


2 一 艺术 化 9 
文字 已 经 在 人 们 的 意识 中 形成 一 种 固定 


的 认 知 ， 只 要 按照 固有 的 笔画 和 形态 将 线条 
搭建 起 来 ， 人 们 都 可 以 自然 而 然 地 将 其 定义 


12 像 素 


为 文字 ， 并 能 正确 读 取 相 应 的 含义 。 图 9-13 


将 相关 的 标题 文字 在 视觉 上 加 以 图 形 化 和 艺术 化 ， 使 其 在 形式 上 与 页 面 中 的 其 他 装饰 性 元 素 配合 更 默契 ， 从 而 
进一步 增加 页 面 的 美观 度 。 一 般 可 以 通过 图 形 化 、 意 象 化 和 重奏 文字 的 方式 将 文字 艺术 化 。 


Photoshop CC 网 站 UI 设计 全 程 揭秘 (第 2 版 ) 
1. 图 形 化 


文字 的 图 形 化 要 求 在 不 削弱 原 有 功能 的 前 提 下 ， 将 其 作为 图 像 元 素 进行 艺术 处 理 和 加 工 ， 最 大 
限度 强化 文字 的 美学 效果 。 这 就 要 求 设计 师 充分 挖掘 想象 力 和 创造 力 ， 将 文字 的 笔画 形态 和 走势 与 


具象 事物 完美 融合 在 一 起 ， 制 作成 极 具 艺术 美感 和 感染 力 的 文字 ， 为 页 面 添 加 更 多 亮点 ， 如 图 9-14 
所 示 。 


图 9-14 


HID 


所 谓 的 意象 是 指 将 主观 的 “ 意 ” 与 客观 
的 “ 象 ” 相 结合 ， 从 而 使 文字 更 富有 表现 力 
的 一 种 艺术 化 处 理 方式 。 

例如 ， 为 了 体现 寒冷 的 感觉 将 文字 制作 
成 寒 冰 质感 ,这 就 是 典型 的 "意象 化 ”。 再 如 ， 
为 了 表现 张扬 、 动 感 和 活力 的 感觉 将 文字 的 
首尾 大 幅 延 伸 ， 并 设计 成 流线型 ， 这 也 属于 
意象 化 ， 如 图 9-15 所 示 。 


ZE 


文字 重 亚 也 是 一 个 不 错 的 艺术 化 处 理 的 方法 。 文 字 与 文字 在 经 过 重 亚 排放 之 后 ， 往 往 能 够 产生 
奇妙 的 空间 感 和 跳跃 感 ， 可 强化 版 面 的 叙事 性 ， 从 而 使 整个 页 面 看 起 来 内 容 更 丰富 ， 更 耐人寻味 。 
但 是 要 注意 ,使 用 重 亚 的 手法 可 能 会 降低 文字 的 可 读 性 , 所 以 要 合理 选用 字体 和 颜色 ,如 图 9-16 所 示 。 
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图 9-16 


ES nx 
遇 网 页 文字 的 排版 设计 5 


优秀 的 网 页 设计 师 总 是 将 文字 的 编排 和 医 


片 放 到 等 重 的 位 置 ， 仔 细 梳 理 和 调整 每 一 个 微小 的 细 


季 ， 使 页 面 中 的 文字 既 达到 美观 的 视觉 效果 ， 又 能 够 快速 有 效 地 将 相关 的 信息 传达 给 用 户 。 


为 了 使 文字 的 版 式 效果 更 符合 页 面 的 整体 美观 度 ， 在 设计 排版 时 就 需要 对 各 种 文字 下 功夫 ， 常 
用 的 文字 排版 手法 有 “对 比 ”“ 统 一 与 协调 ” “平衡 " 


ETD 


对 比 又 分 为 大 小 对 比 、 颜 色 对 比 、 粗 细 对 比 、 明 暗 对比 、 朴 密 对 比 、 主 从 对 比 和 综合 对 比 。 寻 


和 “视觉 诱导 ”。 


出 


实 上 ，“ 对 比 ”手法 是 文字 排版 最 常用 的 手法 ， 之 前 反复 强调 的 文本 颜色 要 采用 背景 颜色 的 对 比 色 ， 
就 已 经 使 用 了 对 比 手法 ， 如 图 9-17 所 示 。 


2. 统一 与 协调 


虽然 一 再 强调 文字 的 对 比 性 ， 但 如 果 运用 得 过 了 头 ， 也 会 造成 版 面 的 不 协调 ， 导 臻 最终 页 


Dy 


A 


泛 


果 杂 乱 无 章 ， 如 图 9-18 所 示 。 


RUNNING WATER 


RECENT WORK 仿 


设计 特别 讲究 对 比 与 
调 又 富有 变化 ， 文 字 排 版 也 是 如 此 ， 如 图 9-19 所 示 。 


ETD 


图 9-17 图 9-18 
办 调 ， 在 整体 效果 协调 的 前 提 下 夸大 局 部 元 素 的 对 比 ， 使 画面 效果 美观 


ol 


如 果 一 个 页 面 d 


图 9-20 所 示 。 


es 


平衡 是 指 合理 安排 页 


的 文字 极 易 引起 版 面 失 下 


的 文 


面 中 的 各 种 元 素 ， 使 整个 版 面 从 颜色 重量 上 看 是 平衡 的 。 事 实 上 ， 大 片 雷 


问题 ， 这 就 要 求 设计 师 能 够 合理 使 用 各 种 排版 手法 打破 平淡 的 布局 方式 。 
字 被 放置 得 很 分 散 ， 还 可 以 通过 改变 字体 、 字 号 、 颜 色 和 位 置 等 方法 来 
曾 强 页 面 的 跳跃 感 和 趣味 性 。 通 过 色 块 和 图 片 的 点 级， 页 面 中 各 种 颜色 的 平衡 性 掌握 得 很 好 ， 妇 


为 了 达到 顺畅 传达 信息 的 目的 ， 可 以 先 使 一 部 分 文字 接触 到 用 户 的 视线 ， 然 后 顺势 诱导 用 户 视 
线 沿 既 定 的 顺序 进行 浏览 ， 这 就 是 视觉 诱导 。 视 觉 诱导 可 以 通过 两 种 方式 实现 : 线条 的 引导 和 图 形 


的 引导 ， 如 图 9-21 所 示 。 


引 
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文字 排版 是 一 项 非常 重要 的 工作 ， 合 理 巧 妙 地 对 文字 进行 布局 和 编排 ， 不 仅 可 以 准确 有 效 地 向 
浏览 者 传递 信息 ， 还 能 使 整个 页 面 效果 更 美观 。 有 些 网 站 甚至 完全 据 弃 了 图 像 ， 仅 靠 文字 的 编排 和 
变化 构建 起 整个 网 站 ， 这 种 崇尚 极 简 的 风格 在 欧美 地 区 很 受 追 捧 。 


有 的 网 站 会 使 用 错落 有 致 的 文字 排列 搭配 精美 的 图 片 ， 而 有 些 网 站 甚至 完全 据 弃 了 图 像 ， 仅 靠 
文字 的 编排 和 变化 构建 起 整个 网 站 ， 这 种 崇尚 极 简 的 风格 在 欧美 地 区 很 受 追 捧 ， 如 图 9-22 所 示 。 
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第 9 章 网 页 的 版 式 和 布局 


EGR 
2. 分 离 排列 文字 》 


分 离 排列 文字 是 指 将 属于 同一 文字 群体 的 字符 单独 分 离 出 来 进行 排列 ， 这 是 一 种 比较 常见 的 文 
字 编 排 手 法 。 这 种 编排 方式 可 以 增加 页 面 的 整体 性 、 美 观 性 和 活泼 轻松 的 氛围 ， 使 网 页 整体 效果 更 
具 时 尚 感 和 现代 感 ， 如 图 9-23 所 示 。 


PRINCE STREET 
= 


、 嘲 


TVLCCORP - 


6DM 
APPROACH. 


| 


区 3. 将 文字 以 线 和 面 的 形式 构成 


如 果 要 为 页 面 添加 更 多 的 趣味 性 ， 可 以 尝试 将 大 段 的 文字 排列 成 各 种 形状 或 线条 。 相 信 很 多 人 
都 看 到 过 由 各 种 文字 拼 贴 成 的 人 脸 ， 这 种 类 型 的 设计 作品 即使 单独 看 起 来 也 十 分 有 趣 ， 将 它们 运 
到 网 页 中 也 定 能 得 到 不 错 的 效果 ， 如 图 9-24 所 示 。 


图 9-23 
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图 9-24 
4. 控制 页 面 的 四 角 和 对 角 线  》 


cns ET 而 网 
页 面 的 中 心 是 页 面 中 最 重要 的 位 NET-A-PORTER Sa 5D 


置 , 而 页 面 的 四 角 则 是 潜在 的 重要 位 置 。 re EONOS TRA NR 四 
如 果 页 面 的 ee FURTHER REDUCTIONS 
所 占据 ， 那 么 整个 版 面 的 范围 就 等 同 于 . 
被 圈定 ， 画 面 的 结构 就 会 显得 很 稳定 。 

将 页 面 对 角 连接 起 来 的 就 是 对 
线 。 如 果 在 页 面 的 四 角 或 对 角 线 安排 文 
字 ， 就 会 在 视觉 上 给 浏览 者 以 稳定 可 靠 
的 感觉 ， 如 图 9-25 所 示 。 
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根据 内 容 决 定 布局 方式 D 


在 布局 页 面 时 ， 每 个 元 素 的 重要 性 不 同 ， 所 采用 的 排列 和 布局 方式 也 不 同 ， 考 虑 好 不 同 内 容 的 
排列 顺序 是 最 重要 的 。 如 果 要 根据 页 面 内 容 决定 网 页 版 式 布局 ， 通 常 可 以 采用 以 下 4 种 方式 。 


下 左 侧 的 页 面 布局 人 @ 


左 侧 页 面 布 局 是 指 页 面 中 的 内 容 居 左 排列 。 普 通 的 4 : 3 屏幕 分 辨 率 多 为 1024 x 768 像素 ， 所 
以 制作 网 页 时 一 般 会 确定 页 面 的 固定 宽度 为 1024 像素 ， 长 度 可 根据 具体 内 容 进行 调整 ， 如 果 大 于 
768 像素 则 需要 使 用 滚动 条 ， 如 图 9-26 所 示 。 
如 果 用 户 使 用 16 : 9 宽屏 来 浏览 网 页 ， 那 么 1024 像素 宽度 的 页 面 将 无 法 完全 填 满 整个 屏幕 ， 
比 时 按 左 侧 布局 的 页 面 将 自动 对 右 侧 的 像素 进行 平 铺 ， 直 至 填 满 整个 屏幕 。 
如 图 9-27 所 示 的 页 面 ， 当 用 户 使 用 宽屏 浏览 时 ， 由 于 左 侧 有 一 张大 图 ， 无 法 被 平 铺 ， 所 以 只 
能 将 右 侧 的 灰色 不 断 横向 平 铺 以 填 满 屏幕 。 


图 9-26 图 9-27 
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水 平 居 中 的 页 面 布 局 是 指 页 面 内 容 居 中 布局 ， 这 是 最 常见 的 一 种 页 面 布局 方式 。 采 用 水 平 居中 
的 方式 布局 页 面 虽然 很 保险 ， 但 很 容易 导致 版 面 呆 板 和 单调 ， 所 以 需要 在 求 稳 的 基础 上 ， 在 版 块 分 
割 和 装饰 性 元 素 上 多 下 功夫 ， 如 图 9-28 所 示 。 
当 用 户 使 用 宽屏 浏览 页 面 时 ， 页 面 的 左右 两 侧 会 被 同时 扩充 ， 以 填 满 屏幕 ， 比 较 常 用 的 方法 是 
使 用 纯色 、 渐 变色 或 图 案 ， 如 图 9-29 所 示 。 
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图 9-28 图 9-29 


全 水 平和 垂直 居中 的 页 面 布局 ”全 


水 平和 垂直 居中 的 页 面 布 局 是 指 将 页 面 的 横向 和 纵向 都 设 定 为 100% 的 布局 方式 ， 这 类 网 页 在 
任何 分 状 率 的 屏幕 中 都 会 绝对 居中 显示 ， 如 图 9-30 所 示 。 

如 果 页 面 采 用 了 整体 性 很 强 ， 或 者 很 独特 的 排版 方式 ， 任 何 细微 的 改动 都 可 能 导致 页 面 的 美观 
度 大 幅 下 降 ， 那 么 就 需要 使 用 这 种 方式 布局 页 面 ， 如 图 9-31 所 示 。 


图 9-30 图 9-31 


满 屏 的 页 面 布局 @@ 


满 屏 的 页 面 布局 是 指 在 搭建 程序 时 不 为 页 面 中 的 各 个 部 分 设置 固定 的 位 置 ， 而 是 采用 相对 的 百 
分 比 放 置 元 素 。 这 样 在 不 同 的 分 辩 率 下 ， 页 面 中 的 各 个 元 素 就 会 自动 调整 显示 的 位 置 ， 使 页 面 永远 
满 屏 显示 。 

但 是 这 种 布局 方式 也 存在 一 个 缺点 ， 如 果 屏 幕 分 辩 率 发 生变 化 ， 页 面 中 的 图 像 也 可 能 被 缩放 ， 
这 就 无 法 保证 图 像 的 清晰 度 。 解 决 这 个 问题 的 方法 就 是 使 用 矢量 图 形 和 动画 代替 位 图 图 像 ， 如 图 
9-32 所 示 。 
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图 9-32 


9.6 轩 [ 页 面 分 割 方式 D 


页 面 的 分 割 方式 主要 有 横向 分 割 、 纵 向 分 割 和 横向 纵向 复合 分 割 3 种 形式 。 在 着 手 制作 网 页 之 前 ， 
应 该 根据 具体 内 容 采 用 其 中 一 种 分 割 方式 ， 大 致 确定 页 面 的 整体 框架 和 结构 ， 再 不 断 为 局 部 区 域 填 
充 细节 ， 以 保证 页 面 的 整体 性 。 


字模 向 分 割 © 


横向 分 割 是 最 常见 的 页 面 分 割 方式 。 采 用 横向 分 割 方式 布局 页 面 时 ， 会 将 整个 版 面 水 平 划 分 为 


sal 


I rem cr 


几 个 区 域 ， 通 常 最 上 方 是 导航 ， 紧 接着 是 Banner， 页 面 中 部 为 主体 部 分 ， 最 下 方 往往 是 版 底 信息 

如 图 9-33 所 示 。 

在 分 割 页 面 时 ， 如 果 要 强调 菜单 或 者 导航 部 分 ， 那 么 可 以 采用 纵向 分 割 。 如 果 要 强调 页 面 的 整 
体 书 ) 调 性 ， 最 好 采 横向 分 害 ， 因为 横向 分 割 页 面 的 视觉 效果 更 符合 阅读 习惯 ， 如 图 9-34 所 示 。 
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图 9-33 图 9-34 


本 纵向 分 唱 | 


纵向 分 割 也 是 比较 常用 的 一 种 页 面 分 割 方式 。 对 页 面 进行 纵向 切 害 时， 最 常见 的 布局 方式 就 是 
在 页 面 左 侧 安排 一 列 导航 或 菜单 ， 并 使 用 醒目 的 颜色 对 其 进行 强调 。 页 面 的 右 侧 通常 会 安排 一 些 正 
文 内 容 或 各 类 信息 ， 如 图 9-35 所 示 。 

这 种 分 割 方式 一 般 会 应 用 于 分 类 多 、 信 息 量 大 的 网 页 ， 使 用 这 种 方法 可 以 最 大 限度 地 强调 导航 
和 菜单 ， 方 便 用 户 分 类 检索 信息 ， 如 图 9-36 所 示 。 
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图 9-35 


向 横向 复合 分 割 “@ 


如 果 要 同时 横向 纵向 分 割 页 面 ， 那 么 通常 是 以 纵向 分 割 为 基础 。 页 面 左 侧 是 一 列 菜单 ， 页 面 右 
侧 的 正文 部 分 采用 横向 分 割 的 方式 排列 信息 ， 如 图 9-37 所 示 。 
有 些 时 尚 类 网 站 非常 青睐 这 种 布局 方式 ， 将 照片 、 色 块 和 说 明文 字 交 错 排列 ， 效 果 非 常 养眼 ， 
如 图 9-38 所 示 。 


图 9-37 图 9-38 


运用 固定 区 域 


所 谓 固定 区 域 是 指 在 页 面 中 


的 某 个 特定 区 域 显 示 全 部 的 内 容 ， 
这 就 意味 着 网 页 设计 出 来 的 效果 
就 是 在 浏览 器 中 看 到 的 样子 ， 页 
中 的 各 个 部 分 不 会 根据 屏幕 分 辨 
率 的 变化 而 改变 布局 方式 ， 如 图 
9-39 所 示 。 

按照 是 否 将 固定 区 域 独立 使 
用 的 标准 ， 可 以 将 使 用 固定 区 域 的 
布局 方式 分 为 两 类 :只 运用 固定 区 
域 和 运用 与 整个 区 域 搭配 的 固定 
区 域 ， 如 图 9-40 所 示 。 
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图 9-40 


页 面 布局 的 连贯 性 和 多 样 性 
任何 设计 都 讲究 整体 上 的 协调 一 致 性 和 局 部 的 丰富 多 变性 ， 网 页 设计 中 的 连 叶 性 不 仅 包括 视觉 
上 的 一 致 性， 还 包括 动态 交互 的 连贯 性 。 
9 连贯 性 


视觉 上 的 连贯 性 是 指 通过 对 图 文 和 其 他 多 媒体 元 素 的 一 系列 编排 ， 来 构建 出 网 站 整体 一 致 的 视 
觉 效果 。 动 态 交 互 的 连贯 性 是 指 提供 在 所 有 页 面 中 都 适用 的 Logo、 导 航 、 菜 单 和 具体 内 容 等 元 素 供 
用 户 浏览 ， 如 图 9-41 所 示 。 
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如 图 9-42 所 示 的 页 面 ， 它 的 布局 方式 非常 固定 ， 虽 然 整体 的 协调 性 和 一 致 性 体现 得 非常 好 ， 


但 是 局 部 变化 不 足 ， 作 为 首页 来 说 吸引 力 不 够 。 


保持 页 面 在 视觉 上 的 连贯 性 虽然 有 助 于 构建 统一 的 企业 形象 ， 但 过 度 追求 一 致 性 可 能 会 导致 页 
面 过 于 单调 和 乏味 ， 如 图 9-43 所 示 。 
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图 9-43 
如 图 9-44 所 示 的 页 面 的 排版 非常 多 变 ， 各 种 色 块 和 形状 运用 得 很 频繁 。 这 款 页 面 的 整体 布局 
方式 没有 任何 问题 ， 只 可 惜 局 部 的 细节 过 于 烦琐 ， 配 色 过 于 跳跃 ， 导 致 页 面 的 整体 美观 度 大 打折 扣 。 
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时 再 移动 端 网 站 UI 设计 


Hs i 本 章 主要 讲解 手机 UI 
册 计 与 十 的 区 别 通过 本 章 的 学 习 ， 


Le 


移动 端 UI 设计 基本 概念 


手机 UI 界面 是 用 户 与 手机 系统 、 交互 的 窗口 ， 手 机 界面 的 设计 必须 基于 手机 设备 的 物理 特 
性 和 操作 系统 的 交互 ee et 
手机 界面 设计 是 一 个 复杂 的 有 不 同学 科 参 与 的 工程 ， 其 中 最 重要 的 两 点 就 是 产品 本 身 的 UI 设计 
和 用 户 体验 设计 ， me 出 优秀 的 作品 。 


We 四 关于 手机 


于 机 匡 汪 人 人 人 用 不 可 少 的 生活 用 品 ， 而 市 面 上 的 手机 品种 可 谓 多 如 牛 毛 ， 我 们 可 以 
类 。 此 外 ， 手 机 的 分 辨 率 和 色彩 级 别 是 两 个 非常 重要 的 参数 ， 它 们 关系 到 UI 


哥 作 系统 划分 可 以 分 为 ijOS 系统 手机 和 Android 系统 手机 。 按 照 功 能 划分 ， 可 以 
分 为 拍照 手机 、 商 务 手机 和 游戏 手机 。 按 照 网 络 划 分 ， 根 据 手 机 支持 的 网 络 不 同 可 以 分 为 3G、4G 
和 5G 手机 。 


2. 手机 的 分 状 率 


手机 的 分 辩 率 与 手机 屏幕 类 型 有 直接 的 关系 ， 下 面 通过 表 10-1 介绍 手机 的 不 同类 型 和 分 辩 率 。 
表 10-1 手机 屏幕 类 型 及 分 辨 率 


屏幕 类 型 特征 描述 
QVGA | 全 称 Quarter VGA， 竖 向 240 x 320 像素 ， 横 向 320 x 240 像素 ，VGA 分 辨 率 的 1/4 
HVGA “| 全 称 Half-size VGA， 大 多 用 于 PDA ，480 x 320 像素 ， 宽 高 比 为 3 : 2，VGA 分 辩 率 的 1/2 
WVGA | 全 称 Wide VGA， 通 常用 于 PDA 或 者 高 端 智能 手机 ， 分 辩 率 分 为 854 x 480 像素 和 800 x 480 像素 两 种 
QCIF “| 全 称 Common Intermediate Format， 用 于 拍摄 QCIF 格式 的 标准 化 图 像 ， 屏 幕 分 辩 率 为 176 x 144 像素 
SVGA 全 称 Super VGA， 屏 幕 分 辩 率 为 800 x 600 像素 ， 随 着 显示 设备 行 业 的 发 展 ，SXGA+(1400 x 1050 像素 )、 
UXGA(1600 x 1200 像素 )、QXGA(2048 x 1536 像素 ) 也 逐渐 普及 
WXGA(1280 x 800 像素 ) 多 用 于 13 一 15 寸 的 笔记 本 电脑 ! WXGA+(1440 x 900 像素 ) 多 用 于 19 寸 宽屏 
WxGA |WSXGA+r(1680x 1050 像素 ) 多 用 于 20 寸 和 22 寸 的 宽屏 ， 也 有 部 分 15.4 寸 的 笔记 本 使 用 这 种 分 辨 率 ; 


WUXGA(1920 x 1200 像素 ) 多 用 于 24 ~ 27 寸 的 宽屏 显示 器 ; 而 WOQXGA(2560 x 1600 像素 ) 多 用 于 30 
寸 的 LCD 屏幕 
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现在 流行 的 分 辩 率 大 部 分 都 与 VGA 有 关系 ,无 论 是 QVGA、WVGA 还 是 HVGA 等 ， 因 为 VGA 就 是 这 些 尺寸 的 
基础 。VGA 最 早 其 实 是 IBM 计算 机 的 一 种 显示 标准 ， 后 来 逐渐 演变 成 了 640 x 480 这 个 分 辩 率 的 代名词 ， 也 是 绝 大 
多 数 分 辩 率 的 基准 。 


0 移动 端 界面 设计 原则 


随 着 科技 的 不 断 发 展 ， 手 机 的 功能 变 得 越 来 越 强 大 ， 基 于 手机 系统 的 相关 软件 应 运 而 生 。 手 机 
设计 的 人 性 化 已 不 仅仅 局 限于 手机 硬件 的 外 观 ， 移 动 端 UI 设计 的 美学 需求 也 在 日 渐 增 长 。 界 面 交互 
要 求 也 是 越 来 越 高 ， 这 时 候 界面 设计 的 规范 性 显得 尤为 重要 。 


手机 软件 运行 基于 操作 系统 的 软件 环境 ， 界 面 设计 基于 这 个 应 用 平台 的 整体 风格 ， 这 样 有 利于 
让 员外 疯 的 东信 


和 a 知识 储备 : 为 什么 界面 的 色彩 及 风格 要 与 系统 界面 统一 ? 
| 答 界面 的 总 体 色彩 应 该 接近 于 类 似 系统 界面 的 总 体 色调 合理 地 根据 系统 界面 风格 和 色彩 ，， 
| 设计 出 包括 图 标 、 按 钮 和 软件 界面 及 在 不 同 操作 状态 下 的 界面 视觉 效果 ， 会 增强 用 户 的 体验 好 ， 
.感度 。 | 
许多 用 户 的 操作 习惯 是 基于 系统 的 ， 所 以 在 界面 设计 的 操作 流程 上 ， 也 要 近 往 当前 系统 的 规范 
性 ， 让 用 户 可 以 快速 掌握 使 用 方法 ， 并 且 简化 用 户 的 操作 流程 ， 使 设计 出 来 的 界面 变 得 简单 易 
如 图 10-1 所 示 。 


2. 界面 效果 的 个 性 化 


设计 时 除了 要 注意 界面 的 整体 性 和 一 致 性 ， 也 要 着 重 突出 软件 界面 的 个 性 化 。 整 体 性 和 一 臻 
性 是 基于 手机 系统 视觉 效果 的 和 谐 统 一 考虑 的 ， 个 性 化 是 基于 软件 本 身 的 特征 和 用 途 考虑 的 ， 如 图 


10-2 所 示 。 


| 和 知识 储备 : 个 性 化 体现 在 哪里 ? 

| 答 : 软件 的 实用 性 是 软件 应 用 的 根本 。 在 设计 界面 时 ， 应 该 结合 软件 的 应 用 范畴 ， 合 | 

， 排 版 式 ， 以 求 达到 美观 适用 的 目的 。 软 件 的 图 标 按钮 是 基于 自身 应 用 的 命令 集 ， 它 的 每 一  ， 
影 


| 内容 映射 的 是 一 个 目标 动作 ， 因 此 作为 体现 目标 动作 的 图 标 ， 它 应 该 有 强烈 的 表意 性 。 色彩 会 
， 响 一 个 人 的 情绪 ， 不 同 的 色彩 会 让 人 产生 不 同 的 心理 效应 ， 反 之 ， 不 同 的 心理 状态 所 能 接受 的 色 ， 
| 彩 也 是 不 同 的 。 | 


3. 界面 视觉 元 素 的 规范 


界面 上 的 线条 与 色 块 后 期 都 会 用 程序 来 实现 ， 这 就 需要 考虑 程序 部 分 和 图 像 部 分 的 结合 。 自 然 


结合 才能 协调 界面 效果 的 整体 感 ， 所 以 需要 程序 开发 人 员 与 界面 设计 人 员 密 切 沟通 ， 达 成 一 致 


尽量 使 用 较 少 的 颜色 表现 色彩 丰富 的 图 像 ， 既 确保 数据 量 小 ， 又 确保 图 像 的 效果 完好 ， 提 高 程序 的 工作 效率 。 


手机 界面 设计 流程 分 为 4 部分， 分别 是 确认 设计 对 象 、 绘 制 设计 草稿 、 完 成 界面 绘制 和 输出 正 
确 格式 。 下 面 对 手机 界面 设计 的 流程 进行 详细 讲解 。 


人 
每 一 个 App 程序 都 有 一 个 核心 功能 。 太 多 的 功能 除了 会 给 程序 的 编写 带 来 难度 外 ， 也 会 使 用 户 


无 所 适 从 。 所 以 在 开始 设计 一 个 App 界面 时 首先 要 确认 真正 的 核心 内 容 。 然 后 根据 核心 内 容 开 始 “ 头 
脑 风 暴 ”， 获 得 满意 的 设计 创意 。 


2. 绘制 设计 手稿 


确定 了 设计 方案 后 ,可 以 通过 绘制 界面 的 草图 来 初步 定稿 。 草图 是 指 用 最 传统 的 纸 笔 绘制 初稿， 
帮助 用 户 在 设计 初期 记录 和 整理 思路 。 

草图 绘制 完成 后 ， 可 以 在 电脑 上 按 
照 准确 的 尺寸 绘制 出 低 保 真 原型 ， 采 用 黑 
白色 和 粗糙 的 线条 来 绘制 低 保 真 原型 ， 并 
且 不 要 在 细节 上 过 多 纠结 。 使 用 铅笔 绘制 
线 稿 后 ， 将 线 稿 放 置 扫描 仪 上 进行 扫描 ， 
如 图 10-3 所 示 。 


3. 完成 界面 绘制 


将 扫描 后 的 线 稿 置 入 一 些 平面 设计 
的 工具 软件 中 进行 软件 绘制 。 一 些 视觉 设 图 10.3 
计 出 身 的 原型 设计 人 员 因 为 软件 使 用 习惯 
的 原因 ， 会 选用 Adobe 公司 的 一 些 平面 和 网 页 设计 工具 来 进行 原型 设计 ， 像 Photoshop、lllustrator 
和 3ds Max 等 ， 如 图 10-4 所 示 。 


图 10-4 
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4. 输出 正确 格式 


在 UI 设计 的 最 后 一 步 是 输出 正确 的 图 片 格式 。 这 时 就 需要 UI 设计 师 在 最 后 交 出 设计 图 纸 时 ， 
配合 开发 人 员 和 测试 人 员 进 行 裁 图 工作 。 


为 了 便于 程序 员 理解 设计 师 的 设计 理念 ， 设 计 师 在 提交 设计 文件 时 可 以 附 赠 一 个 清晰 的 设计 指 
南 文件 。 在 这 个 文件 中 设计 师 需要 对 所 有 文件 的 尺寸 进行 标注 说 明 ， 尽 量 把 所 有 可 能 遇 到 的 情况 给 
程序 员 描述 清楚 。 


对 于 不 同 的 开发 人 员 需 要 的 图 片 格式 也 不 同 ,设计 师 需 要 配合 相关 的 开发 人 员 进行 正确 和 适合 的 切 图 保存 操作 。 


常见 的 手机 系统 p 


目前 ， 市 面 上 较为 流行 的 移动 设备 操作 系统 有 两 种 : iOS 和 Android。 说 起 移动 设备 就 不 得 不 说 
App( 应 用 程序 )， 它 可 以 说 是 智能 手机 和 平板 设备 的 命脉 。iOS 和 Android 都 有 属于 自己 的 应 用 商店 ， 
户 可 以 根据 自己 的 需求 和 喜好 选择 不 同类 型 的 App 进行 下 载 和 安装 ， 体 验 更 多 的 信息 和 内 容 ， 如 
10-5 所 示 。 


到 酒 


0 Lo NK/s blk 员 日 郡 双 呈 
| BL 
Google Pay 商 谨 
Bb 证 全 名 M 3 
[也 次 安装 
谷歌 商 启 
开心 商 启 
酰 印 南 启 
谷歌 应 用 商店 苹果 应 用 商店 


图 10-5 


苹果 系统 (iOS) 


iOS 系统 是 iPad、iPhone 和 iPod touch 等 苹果 手持 设备 的 操作 系统 ， 最 新 的 版 本 是 2018 年 发 布 
的 iOS 12 系统 。iOS 系统 的 操作 界面 极其 美观 ， 而 且 简单 易 用 ， 受 到 全 球 用 户 的 广泛 喜爱 。 


了 1 iOS 界面 特色 


iOS 系统 的 界面 可 以 用 一 个 词 来 形容 ， 那 就 是 简约 。 当 然 ， 它 的 这 种 简约 更 多 的 是 为 了 方便 用 
户 使 用 ， 之 所 以 iPhone 有 如 此 庞大 的 用 户 群 ， 而 且 几 乎 覆盖 了 各 个 年 龄 层 段 ， 就 是 因为 即使 没 用 过 
iPhone 的 人 也 可 以 很 快 上 手 ， 如 图 10-6 所 示 。 

还 有 就 是 iOS 的 所 有 软件 图 标 都 位 于 桌面 , 并 不 存在 专门 放置 程序 的 界面 ,这 样 更 加 便于 操作 ， 
时 其 所 有 图 标 都 采用 了 同样 的 尺寸 和 样式 ， 看 起 来 更 加 整齐 。 


可 
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图 10-6 


虽然 有 着 易 用 的 特点 , 但 是 i0S 毕竟 是 苹果 独 有 的 封闭 系统 , 其 系统 界面 将 一 直 保持 这 种 状态 , 对 一 部 分 人 来 说 ， 
时 间 长 了 难免 会 有 些 审美 疲劳 


iOS 基础 UI 组件 


iOS 系统 的 界面 由 大 量 的 组 件 构成 ， 只 要 掌握 了 不 同 组 件 的 特征 和 制作 方法 ， 就 可 以 非常 容易 
地 制作 出 完整 的 页 面 。 如 图 10-7 所 示 为 iOS 系统 部 分 组 件 的 图 示 效 果 。 标 准 的 iOS 系统 界面 的 组 
件 主要 包括 以 下 内 容 。 


状态 栏 浮 出 层 ( 仅 限 iPad) 
导航 栏 分 栏 视 图 ( 仅 限 iPad) 
1 栏 工具 栏 2. 内 容 视图 表格 形式 
Tab 栏 文本 视图 
Web 视图 
3 警告 框 4 操作 列表 5 模 态 视图 6 登录 图 片 
活动 指示 器 网 络 活动 指示 器 搜索 栏 
日 期 和 时 间 拾 取 器 页 码 指示 器 分 段 控件 
7 控件 4 ”详情 展开 按钮 拾取 器 滚动 条 
信息 按钮 进度 指示 器 切换 器 
标签 翻 围栏 文本 框 


qiwlelritlylulilo 


as 上 四:: :himl' 
vn 


ls 
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让 安 卓 系统 


放 


(Android) 
Android 是 一 种 基于 Linux 的 操作 系统 ， 主 要 使 用 于 智能 手机 和 平板 电脑 。 由 Google 公司 和 开 


机 联盟 合力 开发 。 


Android 操作 系统 最 初 由 Andy Rubin 开发 ， 主 要 支持 手机 。2005 年 8 月 由 Google 收购 注资 。 


2007 年 11 月 ，Google 与 84 家 硬件 制造 商 、 软 件 开发 商 及 电信 营运 商 组 建 开放 手机 联盟 共同 研发 改 
良 Android 系统 。 其 后 于 2008 年 10 月 ， 第 一 部 Android 智能 手机 终于 发 布 了 ， 如 图 10-8 所 示 。 


图 10-8 


TIETTITB 


Android 和 iOS 同 为 市 面 上 较 受 欢迎 的 移动 设备 操作 系统 ，Android 具有 开放 性 、 丰 富 的 硬件 和 


方便 开发 等 优势 。 


© 


© 
© 
© 


开放 性 : Android 平台 是 完全 开放 的 ， 人 允许 任何 移动 终端 厂商 加 入 进来 。 随 着 用 户 和 应 用 的 日 益 
丰富 ，Android 将 会 日 益 成 熟 。 

丰富 的 硬件 : 由 于 Android 的 开放 性 ， 众 多 的 厂商 会 推出 各 种 功能 各 异 的 产品 ， 但 这 些 功能 和 特 
色 不 同 的 设备 并 不 会 影响 到 数据 的 同步 和 软件 的 兼容 性 。 

方便 开发 : Android 平台 提供 给 第 三 方 开发 商 一 个 十 分 宽松 的 环境 ， 所 以 会 有 很 多 新 颖 、 有 趣 的 
软件 诞生 。 

Google 应 用 : Google 有 着 很 长 时 间 的 发 展 历程 ， 而 Google 的 各 种 服务 已 然 成 为 连接 用 户 和 互 
联网 的 重要 纽带 ，Android 平台 手机 将 可 以 完美 地 使 用 这 些 服务 。 


2. Android 界面 特色 >》 


如 果 说 iOS 的 界面 是 简约 的 ， 那 么 Android 就 显得 有 点 简单 。 当 然 ， 这 也 与 其 开源 系统 的 身份 


有 些 相符 ， 不 拘 一 格 的 “性 格 ”使 得 其 图 标 可 以 采用 任意 图 案 、 形 状 。 与 之 前 不 同 的 是 ， 屏 幕 下 方 
的 按键 由 固定 四 个 变 得 更 加 多 元 化 ， 而 且 程序 切换 也 由 纵向 滑动 变 为 了 横向 滑动 ， 当 然 这 仅 是 针对 
原生 系统 而 言 ， 如 图 10-9 所 示 。 


> mt 


Android 最 大 的 优势 就 在 于 厂商 、 开 发 者 、 用 户 可 以 对 界面 进行 美化 ， 几 乎 每 个 厂商 对 旗下 的 Android 手机 界面 
都 做 了 一 定 优化 ， 例 如 HTC 的 Sense 界面 ， 这 也 是 开源 系统 的 优势 。 


3. Android 基础 UI 组 件 


和 iOS 系统 一 样 ，Android 系统 也 有 一 套 完整 的 UI 界面 基本 组 件 。 在 创建 自己 的 App， 或 者 将 
应 用 于 其 他 平台 的 App 移植 到 Android 平台 时 ， 应 该 记得 将 Android 系统 风格 的 按钮 或 图 标 换 上 ， 以 
创建 协调 统一 的 用 户 体验 ， 如 图 10-10 所 示 为 Android 系统 部 分 组 件 的 效果 。 


x 


jifta 
~ 1 1g 
4 1 


图 10-10 


iOS 系统 界面 设计 p 


接 下 来 介绍 一 些 iOS App 设计 的 相关 知识 ， 通 过 对 这 些 知识 点 的 学 习 ， 读 者 就 会 对 设计 一 款 美 
观 而 又 实用 的 手机 程序 的 规则 和 技巧 有 所 掌握 。 


iOS App 设计 概述 0 
如 果 要 设计 一 款 App， 除 了 要 提供 简洁 精美 的 界面 之 外 ， 更 应 该 注意 各 种 功能 和 控件 的 安排 ， 
尽量 使 程序 的 操作 规范 、 简 单 、 易 用 。 可 以 着 重 考虑 以 下 几 点 ， 以 提高 用 户 体验 的 满意 度 。 


回 ”关注 主任 务 : 为 保持 专注 ， 需 要 明确 每 一 屏 上 最 重要 的 内 容 是 什么 。 当 一 个 程序 的 使 用 始终 围 
绕 主 任务 时 ， 用 户 操 作 起 来 会 更 流畅 。 例 如 ， 日 历 关注 的 日 期 以 及 发 生 于 某 日 的 事件 ， 用 户 瑟 


em cr 


以 使 用 高 亮 按钮 强调 今天 ， 并 选择 浏览 方式 ， 以 及 添加 事件 ， 如 图 10-11 所 示 。 

@ ”使 用 方法 明显 、 易 显 : 第 一 时 间 呈 现 程序 的 主 功能 ， 努 力 让 用 户 看 一 眼 就 明白 程序 是 做 f 
的 、 怎 么 操作 ， 因 为 我 们 不 能 确保 所 有 的 用 户 都 有 时 间 来 思考 程序 是 以 什么 方式 工作 的 。 侦 
在 录音 程序 中 户 只 要 看 一 眼 就 明白 哪个 按钮 可 以 开始 录制 ， 哪 个 按钮 可 以 停止 录制 ， 
10-12 所 示 。 

加 ”使 用 以 用 户 为 中 心 的 术语 : 所 有 用 于 与 用 户 沟通 的 文案 应 该 尽 可 能 使 用 朴素 的 措辞 ， 保 证 用 户 
能 够 正确 理解 ， 避 免 使 用 上 涩 冰冷 的 行业 术语 。 例 如 这 个 启用 和 编辑 蓝牙 与 WIFI 的 语言 解释 就 
下 如 图 10-13 和 图 10-14 所 示 。 


NN 


圆 涝 
并 


灶 


出 


图 10-11 图 10-12 图 10-13 图 10-14 
加 界面 元 素 要 一 致 : 比 起 五 花 八 门 的 界面 来 说 ， 用 户 更 期 待 标准 的 视图 和 控件 ， 这 些 视图 和 控件 
在 所 有 程序 中 都 有 一 致 的 外 观 和 行为 ， 这 样 用户 熟 悉 了 一 个 程序 的 操作 后 就 会 自然 而 然 地 举 一 
反 三 、 触 类 旁 通 。 


T 芝 过 iOS 系统 界面 设计 规范 人 @ 


iOS 用 户 已 经 对 内 置 应 用 的 外 观 和 行为 非常 熟悉 ， 所 以 用 户 会 期 待 这 些 下 载 来 的 程序 能 带 来 相 
似 的 体验 。 设 计 程 序 时 可 能 不 想 模 仿 内 置 程序 的 每 一 个 细节 ， 但 这 对 理解 它们 所 遵循 的 设计 规范 会 
很 有 帮助 。 


实例 50 一 一 绘制 iOS App 界面 的 顶部 和 底部 


风 2 * 源 文件 ， 源 文件 第 10 章 NOS App 界 面 psd 
本 * 操作 视频 ， 视 频 第 10 章 \OS App 界 面 的 顶部 和 底部 mp4 
面 设计 的 最 大 区 别 在 于 一 一 


项 部 导航 栏 ， 下 面 一 起 
来 绘制 一 款 iOS App 界 
面 的 项 部 与 底部 ， 通 过 详细 的 操作 感受 
具体 区 别 。 

加 执行 “文件 > "新 建 " 命令 ， 
在 打开 的 “新 建文 档 ” 对 话 框 中 设置 参 
数 ， 如 图 10-15 所 示 。 使 用 “矩形 工 
具 ” 在 画布 中 绘制 把 1233c 的 形状 ， 妇 
10 一 16 所 示 。 打开 “ S 层 样式 ” 对 话 
框 , 选择 "渐变 二 加 ” 选项, 设置 参数 值 ， 
如 图 10-17 所 示 。 


[gy 


sn us 


未 标题 -3 


合 执行 “文件 ”>“ 打 开 " 
代为 “明度 ”， 


图 10-15 


图 10-16 


网 


图 10-18 
使 用 “ 椭 


图 


命令 ， 导 入 素材 


图 


所 示 。 更 改 


层 不 透明 度 为 20%， 


工具 ”在 画布 中 绘制 


图 10-18 
了 复制 圆 形 


， 如 图 10- 


图 10-19 


图 10-20 所 示 。 


正 圆 形 ， 如 


像 ， 并 为 其 添加 剪 


图 10-17 


图 


贴 蒙 版 ， 


”面板 如 


像 效 果 如 医 


风 


图 10-20 


10-19 所 示 。 


10-22 所 示 。 


21 所 示 。 继 续 使 
10-23 所 示 。 


图 像 给 


图 10-21 


完成 ， 如 图 


复制 圆 司 环 ， 言 号 医 


[ 具 " 在 画布 中 


环 , 如 


“椭圆 工具 ”在 画布 中 绘制 


图 10-22 


田 


图 10-23 


添加 文字 内 


谷 ， 


图 10-24 


板 ， 


全 打开 "字符 "本 


设置 参数 如 


如 


制 3 


林 73267， 描 边 颜色 为 机 2456c， 如 


#5d8bde 的 文字 内 容 


10-25 所 示 。 使 用 
三 使 用 “钢笔 工 


月 相 后 
[ 具 ” 在 画布 中 绘制 于 


方法 完成 相似 内 


y 
所 


容 的 制作 ,四 
大， 


所 示 。 使 月 


“ 横 排 文字 了 


名 


10-26 所 示 。 


如 


10-27 所 示 。 使 用 “和 拢 


条 直线 ， 如 图 10-28 


所 示 。 使 用 “椭圆 


[ 具 ” 在 画布 中 绘 


图 


几 


10-29 所 示 。 


制 正 


形 ， 修 改 加 


田 


“ 横 排 文字 工具 


10-30 所 示 。 使 朋 


“字符 ” 


板 ， 设 置 参数 如 


图 


如 图 10-31 所 示 。 界 


面 


页 部 绘制 完成 ， 


10-32 


像 效 果 如 图 


工具 ”在 画布 


绘 
的 填充 颜色 为 


”在 画布 中 


所 示 。 
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图 10-25 


图 10-26 


图 10-27 图 10-28 图 10-29 
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图 10-30 图 10-31 


。eeoo 中 国电 信 令 1:43 pm 


4 人 3285 粉丝 


图 10-32 


观 执行 "文件 "> 打开" 命令 , 导入 素材 图 像 , 如 图 10-33 所 示 。 使 用 快捷 键 Ctt+T 调 出 定 界 框 ， 
单 击 鼠标 右键 ， 在 弹出 的 菜单 中 选择 “扭曲 ”命令 ， 调 整 图 像 到 如 图 10-34 所 示 的 角度 。 


0 sn ut 


图 10-33 


图 10-34 


三) 按 Enter 键 确认 操作 ， 图 像 效 果 如 图 
图 10-36 所 示 。 


10-35 所 示 。 使 用 相同 方法 完成 相似 内 容 的 制 


作 ， 如 


图 10-35 


ET 本 iOS 图 标 设计 _ 全 


图 10-36 


想 要 的 信息 资源 。 用 户 通过 图 标的 操作 ， 可 


iOS 图 标 有 很 好 的 整体 性 ， 而 良好 的 整体 | 


姑 标 是 一 种 小 的 可 视 控 件 ， 是 在 设计 中 的 指示 路 牌 ， 它 以 最 便捷 、 简 单 的 方式 指引 浏览 者 获取 


以 快速 地 完成 某 项 操作 或 找到 需要 的 信息 ， 从 而 节省 
大 时 宝贵 的 时 间 和 精力 。 下 面 介绍 图 标 绘制 的 相关 知识 。 


竹 可 以 减少 用 户 体验 上 带 来 的 冲突 。 在 设计 和 制作 ijOS 


创造 一 个 统一 外 观 、 感 觉 完整 的 用 户 界 


得 界面 更 加 专业 。 


iOS 系统 被 设计 在 一 系列 屏幕 尺寸 和 分 辩 率 


产品 的 附加 价值 。 精 炼 的 图 形 风 格 也 使 折 


未 时 ， 需 要 注意 体现 其 中 的 一 些 特点 ， 以 便 使 整体 UI 界面 的 协调 性 和 视觉 感 更 加 。 


司 的 设备 上 运行 ， 在 设计 图 标 时 ， 必 须 


知道 设 


计 的 图 标 有 可 能 在 任何 设备 上 安装 运行 。 如 何 
式 和 应 用 领域 来 设计 ， 如 图 10-37 所 示 。 


设备 上 了 


E 确 地 显示 ， 就 要 根据 所 需要 的 


图 标 格 
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iPhone Spotlight iPhone App 
ios 7-11 ioS 7-11 
40pt 60pt 
) 加 | 1 1 
lH 1 
1 I I 1 1 
1 | | 1 1 
I 1 
| 1 1!i! | 
2x 3x 2x 3x 
iPhone Notification iPhone 
ioS 7-11 Spotlight - iOS 5,6 
20pt Settings - i0S 5-11 
29pt 
1 | 1 1 
1 1 1 I 
1 1 1 1 
I | 
1 | 1 
1x 2x 1x 2x 
iPad Notifications iPad Settings 
i0S 7-11 ioSs 5-11 
20pt 29pt 
i 1 1 1 
1 1 1 
1 1 1 
1 1 
1 1 I 1 
1x 2x 1x 2x 2x 
iPad Spotlight iPad App iPad Pro App 
ios 7-11 ios 7-11 ioS 9-11 
40pt 76pt 83.5pt 


接 下 来 继续 绘制 
iOS App 界面 的 主体 内 
容 ， 在 绘制 过 程 中 用 户 
会 发 现 ,， iOS App 界面 
的 主体 内 容 跟 Android 
界面 相差 无 几 。 
加 使 用 “椭圆 工具 ”在 画布 中 给 
制 任意 颜色 的 正 圆 形 ， 如 图 10-38 所 示 。 
在 选项 栏 中 选择 “ 减 去 顶层 形状 ”选项 ， 
继续 使 用 “椭圆 工具 ”在 画布 中 绘制 正 
司 形 , 如 图 10-39 所 示 。 打开 “图 层 样 式 ” 
对 话 框 ， 选 择 “ 渐 变 到 加 ”选项 ， 设 置 
参数 如 图 10-40 所 示 。 


项 


* 源 文件 : 源 文 件 第 10 章 NOS App 界 面 .psd 
* 操 作 视频 : 视频 第 10 章 \iOS App 界 面 的 主体 .mp4 
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@ 本 #45db5e 


图 10-38 图 10-39 图 10-40 


到 修改 形状 的 “填充 ” 值 为 0%，“ 图 层 ”面板 如 图 10-41 所 示 。 修 改 完成 后 ， 形 状 效果 如 
图 10-42 所 示 。 继 续 使 用 “椭圆 工具 ” 在 画布 中 绘制 正 圆 形 ， 如 图 10-43 所 示 。 


图 10-41 图 10-42 图 10-43 


三 将 素材 图 像 导 入 设计 文档 中 ， 并 为 其 添加 剪贴 蒙 版 ， 如 图 10-44 所 示 。 打 开 “ 字 符 ” 面板， 
设置 参数 如 图 10-45 所 示 。 使 用 “ 横 排 文 字 工具 ”在 画布 中 添加 文字 ， 如 图 10-46 所 示 。 
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图 10-44 图 10-45 图 10-46 


码 使 用 相同 方法 完成 相似 文字 内 容 的 制作 ， 如 图 10-47 所 示 。 使 用 “ 自 定形 状 工具 ”在 画布 
中 绘制 描 边 为 时 73267 的 心 形 ， 如 图 10-48 所 示 。 打 开 “ 字 符 ” 面 板 ， 设 置 参 数 如 图 10-49 所 示 。 
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图 10-47 图 10-48 图 10-49 


三 使 用 “ 横 排 文字 工具 ”在 画布 中 添加 文字 内 容 ， 如 图 10-50 所 示 。 使 矩形 工具 ” 
在 画布 中 绘制 森 5db5e 的 形状 ， 如 图 10-51 所 示 。 


习 


图 10-50 图 10-51 


打开 “字符 " 面板 , 设置 参数 如 图 10-52 所 示 。 使 用 “ 横 排 文字 工具 ” 在 画布 中 添加 文字 内 容 ， 
如 图 10-53 所 示 。 使 用 “钢笔 工具 ”在 画布 中 绘制 形状 ， 如 图 10-54 所 示 。 


图 10-52 图 10-53 图 10-54 


使 用 " 自 定形 状 工具 " 在 画布 中 绘制 #9fb6d0 的 形状 , 如 图 10-55 所 示 。 继续 使 用 "椭圆 工具 ” 
在 画布 中 绘制 正 圆 形 ， 如 图 10-56 所 示 。 


图 10-55 图 10-56 
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了 使 用 相同 方法 完成 相似 文字 内 容 制作 ， 如 图 10-57 所 示 。 完 成 界面 的 绘制 ， 效 果 如 
10-58 所 示 。 


尼克 “ 贝 利 


图 10-57 图 10-58 


10.4 Android 系统 界面 设计 


稍 着 Android 平台 的 发 展 ， 应 用 界面 逐渐 形成 了 一 套 统一 的 规范 。 在 设计 一 套 产品 时 ， 无 论 是 
交互 层面 还 是 视觉 层面 ， 都 要 认真 考虑 设计 平台 的 规则 ， 取保 证 界面 的 曙 性 ， 同 时 又 不 缺乏 创新 。 
平 所 有 的 系统 平台 都 倾向 于 打造 独特 的 交互 和 视觉 模式 ， 从 而 吸引 自身 的 用 户 群 体 。 作 为 一 
款 App， 除 了 有 美观 的 UI 界面 之 外 ， 合 理 的 操作 和 行为 模式 也 是 必 备 的 条 件 。 


ge 村 Android App UI 概述 


Android 系统 Ul 提供 的 框架 包括 主 界面 (Home) 的 体验 、 设 备 的 全 局 导航 及 通知 栏 。 为 确保 
Android 体验 的 一 致 性 和 使 用 的 愉快 度 ， 需 更 加 充分 地 利用 App。 如 图 10-59 至 图 10-62 所 示 为 锁 
面 、 最 近 任务 界面 以 及 通知 栏 。 


忆 


fF5 个 由、 


a | 过 


图 10-59 图 10-60 


实例 52 一 一 绘制 Android 个 性 主 界面 


Android 系统 与 iOS 系统 最 主要 的 区 别 来 源 于 主 界面 图 标 显示 方式 的 不 同 ， 这 
就 造成 了 Android 系统 的 用 户 可 以 根据 自己 的 喜好 决定 图 标的 显示 主题 ， 而 iOS 系 
统 用 户 的 主 界面 则 是 一 成 不 变 的 。 


Re cr 


加 执行 “文件” >“ 新建” 命令， 在 弹 | * 源 文件 ， 源 文件 第 10 章 ndroid 个 性 主 界面 ped 
出 的 “新 建文 档 ”对 话 框 中 单 击 “存储 预 设 ” | “操作 频 ,视频 第 10 章 ndrid 个 性 主 界面 mp4 
按钮 ， 设 置 参 数 如 图 10-63 所 示 , 并 保存 预 设 。 

三 继续 在 “新 建文 档 " 对 话 框 中 单 击 “已 
保存 ”选项 ， 设 置 背景 颜色 为 # f7fdaf， 如 
图 10-64 所 示 。 双 击 “1080x 1920” 预 设 ， 
进入 设计 文档 中 ， 如 图 10-65 所 示 。 


BB" 


图 10-63 图 10-64 图 10-65 
于 执行 文件” >“ 打开 ”命令 ， 将 素材 图 像 "素材 \ 第 10 章 \100401.png” 导 入 ， 调 整 到 
合适 大 小 ， 如 图 10-66 所 示 。 使 用 “矩形 工具 ”在 画布 中 绘制 形状 ， 如 图 10-67 所 示 。 复 制 形状 ， 
调整 位 置 和 大 小 ， 如 图 10-68 所 示 。 
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图 10-67 图 10-68 

天 打开 "字符" 面板, 设置 各 项 参数 ， 在 画布 中 输入 文字 内 容 ， 如 图 10-69 所 示 。 继 续 在 “ 字 
符 ” 面 板 中 设置 参数 ， 如 图 10-70 所 示 。 

三 然后 在 画布 中 输入 文字 内 容 ， 如 图 10-71 所 示 。 使 用 相同 的 方法 完成 相似 的 内 容 制作 ， 如 
妈 10-72 所 示 。 


THE TI TT 过 工 | 这 TFT TY 工时 


图 10-70 


图 10-69 
4G | 
上 几 中 国电 信 
图 10-71 
川中 国电 信 11:08 88 Eh 
图 10-72 


了 选中 刚刚 绘制 的 图 层 , 单 击 “图 层 " 面板 底部 的 “创建 新 组 " 按钮 , 并 为 其 重 命名 为 “导航 栏 ”， 
如 图 10-73 所 示 。 执 行 “ 文 件 ” >“ 打 开 ” 命 令 ， 将 素材 图 像 拖 入 画布 中 ， 如 图 10-74 所 示 。 再 次 
执行 “文件 ” >“ 打开 ”命令 ， 将 素材 图 像 拖 入 画布 中 ， 如 图 10-75 所 示 。 


a :1 


国 @TOD® 
; 


i 
LE Ce 


图 10-75 


Pp， 如 图 10-76 所 示 。 
有 10-77 所 示 。 


图 10-73 图 10-74 


芭 隐藏 图 层 并 继续 执行 “文件 ” >“ 打开” 命令 ， 将 素材 图 像 拖 入 画布 


次 执行 “文件 ” >“ 打开 ”命令 ,将 素材 图 像 拖 入 画布 中 ， 并 为 其 创建 剪贴 蒙 版 ， 妇 
显示 图 层 ， 图 标 绘制 完成 ， 如 图 10-78 所 示 。 


图 10-76 图 10-77 图 10-78 
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三 使 用 相同 方法 完成 相似 图 标 内 容 的 绘制 ， 如 图 10-79 所 示 。 打 开 “ 图 层 ” 面 板 ， 将 各 图 标 
的 图 层 进行 编组 ， 并 按照 图 标的 功能 为 其 重 命名 ， 如 图 10-80 所 示 。 打 开 “ 字 符 ”面板 ， 设 置 参数 
如 图 10-81 所 示 。 


中 国电 信 1108 50D 
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恒 10-79 图 10-80 图 10-81 
三 使 用 “ 横 排 文字 工具 ”在 画布 中 添加 文字 ， 如 图 10-82 所 示 。 使 用 相同 方法 完成 相似 文字 
内 容 的 制作 ， 如 图 10-83 所 示 。 使 用 “椭圆 工具 ”在 画布 中 绘制 黑色 圆 环 ， 如 图 10-84 所 示 。 
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图 10-82 
歼 复 制 贺 坏 ， 如 图 10-85 所 示 。 再 


板 和 


绘制 完成 的 效果 图 ， 如 图 10-86 所 示 。 
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图 10-85 


Te Android App 界面 设计 原则 


为 了 保持 用 户 的 兴趣 ，Android 用 户 体验 设计 团队 设 定 了 以 下 原则 ， 把 它 当 成 自己 的 创意 和 设计 
9 思想 。 
惊喜 : 无 论 是 漂亮 的 界面 还 是 一 个 适时 的 声音 效果 都 是 体验 的 乐趣 ， 微 妙 的 效果 都 可 以 营造 出 
令 人 惊喜 的 操作 体验 。 
个 性 化 : 用 户 喜欢 增加 个 人 的 东西 ， 让 人 感觉 更 有 亲切 感 和 控制 感 ， 提 供 实 用 、 漂 亮 、 有 趣 、 
可 定义 且 不 妨碍 主要 任务 的 默认 设置 。 
记 住 用 户 习 惯 : 跟随 用 户 的 使 用 行为 ， 避 免 重复 提问 用 户 。 
表达 尽量 简洁 : 尽量 使 用 简短 的 句子 ， 过 长 的 语句 会 导致 用 户 没 耐心 看 完 就 跳 过 。 
图 片 比 文字 更 容易 理解 : 使 用 图 片 代替 文字 解释 想法 ， 容 易 获 得 用 户 的 更 多 注意 力 ， 比 文字 更 
有 效率 。 
为 用 户 做 决定 : 要 尽 最 大 的 努力 去 猜 用 户 的 想法 ， 而 不 是 什么 都 问 用 户 ， 太 多 的 选择 和 问题 会 
让 用 户 感到 厌烦 。 为 了 预防 猜测 是 错 的 ， 要 提供 后 退 操作 。 


【ZE Android App 界面 设计 风格 ” @ 


很 多 开发 者 都 想 把 自己 的 App 发 布 到 不 同 的 平台 上 ， 以 便 更 多 的 用 户 可 以 下 载 使 用 。 如 果 你 正 
在 准备 着 手 开发 一 款 应 用 于 Android 平台 上 的 App， 那 么 要 记 住 ， 不 同 的 平台 有 不 同 的 规则 。 在 一 个 
平台 上 看 似 完 美的 做 法 未 必 同 样 适用 于 其 他 的 平台 。 


1. 主题 样式 


主题 样式 是 Android 为 了 保持 App 或 操作 行为 的 视觉 风格 一 致 而 创造 的 机 制 。 风 格 指定 了 组 成 
用 户 界 面 元 素 的 视觉 属性 ， 如 颜色 、 高 度 、 空 白 及 字体 大 小 ， 如 图 10-87 所 示 。 


2. 字体 


Android 的 设计 语言 依赖 于 传统 的 排版 工具 ， 如 大 小 、 控 件 、 节 奏 ， 以 及 与 底层 网 格 对 齐 。 成 功 
地 应 用 这 些 工 具 可 以 快速 帮助 用 户 了 解 信息 ， 如 图 10-88 所 示 。 
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图 10-87 


Roboto ICECREAM 
SUNGLASSES #9876543210 


Self-driving robot ice cream truck 
Fudgesicles only 25¢ Music around the block 
Summer heat rising up from the sidewalk 


图 10-88 


图 标 为 操作 、 状 态 和 App 提供 了 一 个 快速 且 直 观 的 表现 形式 ， 如 图 10-89 所 示 。Android 系统 
中 的 图 标 主要 可 以 分 为 启动 图 标 、 操 作 栏 图 标 和 小 图 标 等 。 每 种 图 标的 尺寸 和 规范 均 不 相同 ， 需 要 
根据 实际 用 途 决定 图 标的 大 小 。 


Android App 为 用 户 提供 许多 方便 操作 的 小 控件 ， 一 套 完整 的 Android 控件 包括 选项 卡 、 列 表 、 
网 格 列表 、 滚 动 、 下 拉 菜 单 、 按 钮 、 文 本 框 、 滑 块 、 进 度 条 、 活 动 开 关 、 对 话 框 和 选择 器 等 。 下 
分 别 讲解 这 些 控件 的 作用 。 
加 ”选项 卡 : 要 轻松 探索 Android App 中 的 不 同 功能 ， 可 以 通过 操作 栏 中 的 选项 卡 来 完成 ， 并 且 还 可 
以 浏览 不 同 分 类 的 数据 集 ，Android App 中 有 3 种 选项 卡 。 
回 ”列表 : 列表 可 以 被 用 作 向 下 排列 的 导航 和 选取 的 数据 ， 可 以 纵向 展现 多 行内 容 。 
加 ”网 格 列表 : 网 格 列表 最 适合 那些 使 用 图 像 展 示 的 数据 ， 是 替代 标准 列表 的 选择 。 与 列表 相对 比 ， 
网 格 列表 比较 先进 一 些 ， 它 既 可 以 水 平 滚动 ， 也 可 以 垂直 滚动 。 


ER 


滚动 : 


户 可 以 通过 滚动 使 用 一 


个 滑动 的 手势 查看 更 多 内 容 。 滚 动 的 速度 


手势 的 速度 决定 。 


下 拉 菜 单 : Spinner 为 用 


可 以 通过 触摸 下 拉 框 展示 所 有 可 选 内 容 。 


户 提供 了 一 个 快速 选择 的 方式 


选中 的 内 容 可 以 通过 默认 展示 ， 用 | 


按钮 : 文本 和 图 形 都 被 包括 在 按钮 中 。 


用 户 通过 触摸 按钮 的 行为 来 触发 信息 。Android App 支持 


种 可 以 包含 文本 和 图 


， 也 有 多 行 ， 


形 的 按钮 一 基础 按钮 和 无 边框 按钮 。 
户 可 以 通过 触摸 一 个 文本 框 的 区 域 ， 


就 会 自动 放置 光标 ， 


两 

文本 框 : 文本 框 有 单行 
并 显示 键盘 。 

滑 块 : 当 需要 从 一 段 范围 内 进行 选择 
为 最 大 值 。 

进度 条 : 用 户 可 以 通过 进度 条 知道 任务 已 
在 制作 时 避免 使 用 一 


实例 53 一 给 制 Android 选项 卡 的 项 部 全) 
EL 


© 
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时 可 以 使 用 交互 式 的 滑 块 。 滑 块 通常 左边 为 最 小 值 ， 右 边 


经 完成 的 百分比 。 进 度 条 通常 应 该 是 从 0% 到 100%。 
个 进度 条 代表 多 个 事件 或 把 进度 条 设 定 到 一 个 更 低 的 值 。 


固定 选项 卡 可 以 
显示 所 有 项 目 ， 用 户 只 
要 触摸 标签 即 可 导航 ， 
下 面 将 带领 用 户 绘 制 
Android 系统 中 的 应 用 程 


* 源 文件 : 


名 中 国电 信 11:08 


源 文件 第 10 章 Android 选项 卡 .psd 
* 操作 视频 : 视频 \ 第 10 章 Android 选项 卡 的 顶部 .mp4 


已 安装 


BB8% Ey) 


全 部 


序 管理 选项 卡 的 界面 。 

具体 操作 步骤 可 扫 
描 右 侧 的 二 维 码 打开 电 
子 书 进 行 查看 。 


Android 


图 标 在 屏幕 中 占用 的 面积 很 小 ， 
如 图 10-90 所 示 。 


图 10-90 


1. 图 标 设计 规范 


Android 设备 的 屏幕 密度 基线 是 中 等 ， 
为 基准 密度 设计 图 标 ， 把 图 标 放 在 应 用 的 默认 可 绘制 资源 中 
HVGA 设备 如 T-Mobile G1 中 运行 应 用 ， 根 据 需 要 测试 和 调整 你 的 基准 图 标 ; 
建 的 图 标 感到 满意 的 时 候 ， 为 其 他 密度 创造 
版 本 ; 把 基准 医 


副本 。 把 基准 图 标 按 比例 增加 为 150% ， 创 造 一 个 高 密度 
标 按 比例 缩小 为 75%， 创造 一 个 低 密度 版 本 ; 把 图 标 放 入 应 用 的 


但 图 标 为 操作 、 状 态 和 App 提供 了 一 个 快速 且 直 观 的 表现 形式 ， 


一 种 被 推荐 的 为 多 种 屏幕 密度 创造 图 标的 方式 为 : 首先 
， 然 后 在 Android 可 


j 视 化 设备 (AVD) 或 者 
如 果 对 在 基准 密度 下 创 


村 定 密度 资源 目录 中 。 
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I rm cr 


2. 图 标的 特点 


同属 于 市 面 上 占据 市 场 份 
额 比较 多 的 手持 设 


二 


MTMDIA roots 


ni 
叶 
办 
河 
TT 
测 
Ss 


Android 和 iOS 系统 图 标的 样 了 CL 加 加 
四 国 


相差 比较 大 。 总 
Android 图 标 采 用 高 度 概 括 和 夸张 
的 形象 ， 而 且 圆 角 比 iOS 图 标 小 得 
多 。 虽 然 大 都 使 用 圆 角 和 珑 形 的 形状 ， 
但 也 会 根据 功能 的 不 同 采用 其 他 样 
式 ， 如 图 10-91 所 示 。 


一 
酒 
片 
号 


果 , 但 没有 高 光 


在 Android App 中 ， 固 


> 源 文件 ， 源 文件 第 10 章 WAndroid 选 项 卡 .psd 
操作 视频 : 视频 第 10 章 Android 选 项 卡 的 主体 .mp4 


定 选项 卡通 常 靠 文字 的 变色 
和 底部 的 线条 来 区 分 没 选中 
与 被 选中 , 下 面 接 上 一 案例 ， 
继续 来 绘制 Android 选 项 卡 。 

具体 操作 步骤 可 扫描 右 
侧 的 二 维 码 打开 电子 书 进行 
查看 。 


[Ot 
扫 码 看 电子 书 


移动 端 与 PC 端 网 页 UI 的 区 别 ? 


移动 端 网 页 UI 与 PC 端 网 页 UI， 操作 的 媒介 不 同 ( 手指 与 鼠标 )， 这 是 一 个 很 大 的 区 别 ， 
从 而 造成 了 如 下 几 点 不 同 。 


ER 界面 不 同 

移动 平台 上 的 界面 设计 保留 了 
Web 的 核心 部 分 ， 更 加 简洁 ， 常 
用 的 功能 按钮 更 易于 查找 。 移 动 端 
Ul 是 将 PC 端的 一 些 内 容 进 行 重 
组 ， 目 的 是 突出 移动 用 户 的 特点 ， 
优先 突出 用 户 所 需要 的 一 些 信息 ， 
如 图 10-92 所 示 。 


Et 
TREE 位 置 不 同人 


于 鼠标 ， 可 以 说 按钮 在 屏幕 中 的 任何 位 置 ， 对 于 操作 的 影响 都 不 是 很 大 ， 用 户 可 以 轻松 地 移 
动 鼠 标 到 任何 想 去 的 位 置 ， 单 击 任何 需要 的 按钮 。 因 此 我 们 可 以 看 到 大 部 分 的 网 页 ， 为 了 保证 网 页 
界面 整体 的 美感 ， 一 般 都 将 按钮 放置 在 边缘 的 一 个 狭小 空间 内 。 

而 对 于 移动 端 网 页 Ul， 需 要 考虑 的 是 手机 的 使 用 环境 ， 虽 然 当 前 手机 屏幕 尺寸 越 来 越 大 ， 但 
户 更 加 希望 单 手 操作 手机 ， 因 此 为 使 用 者 设计 的 按钮 ， 通 常 更 多 在 屏幕 下 方 ， 或 左右 手 大 拇指 能 控 
制 到 的 区 域内 。 


操作 习惯 不 同 


对 于 鼠标 ， 通 常会 有 单 击 、 双 击 和 右键 这 几 种 操作 ， 因 此 在 PC 端 网 页 UI 中 ， 可 以 设计 右键 菜 
单 和 双击 动作 等 。 

而 对 于 移动 端 网 页 Ul, 通常 会 设计 单 击 、 长 按 、 滑 动 甚至 多 点 触 控 , 因此 可 以 设计 长 按 呼出 菜单 、 
滑动 翻 页 或 切换 、 双 指 的 放大 缩小 以 及 双 指 的 旋转 等 。 

很 明显 ， 设 计 者 不 能 把 以 上 这 两 种 操作 习惯 混用 ， 试 想 一 下 如 果 手 机 应 用 中 出 现 右键 菜单 ， 或 
者 网 页 中 出 现 多 点 触 控 操 作 ， 那 么 浏览 者 会 有 怎样 的 体验 。 


[过 按钮 状态 不 同 人 @ 


对 于 PC 端 网 页 UI 中 的 按钮 ， 通 常 有 默认 状态 、 鼠 标 经 过 状态 、 鼠 标 单 击 状态 和 不 可 用 状态 。 
而 对 于 移动 端 网 页 UI 中 的 按钮 ， 通 常 只 有 默认 状态 、 点 击 状态 和 不 可 用 状态 。 


因此 ， 在 PC 端 网 页 UI 中 ， 按 至 
为 一 体 ， 不 必 担心 用 户 找 不 到 按钮 ， 


因为 当 用 户 找 不 到 的 时 候 ， 会 用 鼠标 
在 屏幕 上 滑动 ， 这 时 按钮 的 鼠标 经 过 
状态 就 派 上 用 场 了 。 

而 在 移动 端 网 页 Ul 中 ， 按 钮 需 
要 更 加 明确 ， 指 向 性 更 强 , 让 用 户 证 
知道 什么 地 方 有 按钮 ， 因 为 一 旦 用 
户 单 击 ， 触 发 按钮 的 事件 就 发 生 了 ， 
如 图 10-93 所 示 。 


当 


PC 端 和 移动 端 输出 的 区 域 尺寸 不 同 ， 这 同样 是 一 个 很 大 的 区 别 ， 目 前 主流 显示 器 的 尺寸 通常 在 19 一 24 寸 ,而 
主流 手机 的 尺寸 则 仅仅 为 5 ~ 7 寸 。 这 个 不 同 造成 的 结果 是 在 PC 端 网 页 UT 中， 可 以 尽量 多 地 把 内 容 放 进 首页 ， 而 
尽量 避免 更 多 的 层级 ， 一 般 类 的 网 站 基本 只 有 3 级 目录 ， 而 这 个 3 级 目录 ， 是 建立 在 第 一 级 所 产生 的 子 目 录 足 够 多 


的 情况 下 。 而 在 移动 端 网 页 UI 中 ， 就 需要 更 多 的 层级 ， 因 为 不 可 能 在 第 一 个 页 面 里 放 入 无 限 多 的 内 容 ， 因 此 必须 给 
用 户 一 个 更 加 清晰 的 操作 流程 ， 让 用 户 可 以 更 容易 地 知道 当前 的 位 置 ， 并 且 很 容易 地 到 达 自 己 想 去 的 页 面 。 因 此 ， 
Map 在 移动 端 网 页 UI 中 的 重要 性 ， 要 比 PC 端 网 页 UI 更 大 。 


移动 端 所 有 的 模块 都 是 从 上 至 下 展开 ， 也 称 为 瀑布 流 。 好 处 是 页 面 内 容 较 多 时 ， 可 以 通过 手指 
向 下 滚动 实现 翻 页 操作 ， 布 局 方式 逐渐 趋 于 统一 。 

而 PC 端的 布局 方式 因为 空间 充足 ， 相 比 移动 端 单一 的 “瀑布 流 ”布局 方式 来 说 ， 就 显得 比较 
多 种 多 样 了 ， 例 如 常用 的 T 型 布局 、 口 型 布局 和 POP 布局 方式 等 。 


2 本 1 1 天 这 商业 网 站 综合 案 他 。 “2 


的 可 操作 


帮助 用 户 


制作 儿童 类 网 站 ® 


在 这 一 节 中 ， 将 试 着 制作 一 款 完整 的 儿童 类 网 站 页 面 。 这 款 页 面包 含 的 内 容 比 较 少 ， 所 以 制作 
起 来 并 没有 太 大 的 难度 。 


这 是 一 款 儿 童 教育 培训 类 的 网 站 页 面 。 该 页 面 采用 了 明快 的 色彩 来 烘托 儿童 网 站 的 生动 和 活 泌 ， 
使 进入 网 站 的 用 户 被 这 种 氛围 所 感染 。 网 站 中 的 图 片 是 孩子 最 纯真 的 笑脸 ， 能 够 最 大 限度 地 加 深 用 
户 对 网 站 的 认 知 。 


这 款 页 面 采用 温暖 朴实 的 浅 土 黄色 和 深 灰色 作为 主 色调 ， 为 了 强调 页 面 的 轻松 感 ， 在 局 部 位 置 
点 缀 郴 黄 色 、 嫩 绿色 和 灰 蓝 色 。 从 总 体 效果 来 看 ， 这 款 页 面 既 有 培训 类 网 站 的 严谨 ， 又 兼顾 儿童 网 
站 的 活 泌 。 


主 色调 点 级 色 


2 二 下 可 版 式 分 析 > 
从 大 体 来 看 ， 这 款 页 面 采用 了 om 
左右 框架 型 结构 的 形式 。 页 面 左 半 re 


部 分 包含 导航 、Logo、Banner 和 版 
底 人 信息， 图片 式 菜单 横 跨 页 面 的 两 
个 部 分 ， 右 半 部 分 只 有 一 些 简单 的 Banner #1 
文字 信息 ， 如 图 11-1 所 示 。 国 


0 
a | .AN 
实例 55~ 一 儿童 类 网 站 的 背景 和 导航 。 (中 曙 


优秀 的 网 页 设计 不 仅 能 够 从 外 
观 上 给 浏览 者 留 下 深刻 的 印象 ， 而 
且 能 够 使 浏览 者 全 面 、 快 速 地 了 解 
相关 的 信息 。 

接 下 来 制作 儿童 类 网 站 的 背景 
和 导航 ， 具 体操 作 步 骤 可 扫描 右 侧 
的 二 维 码 打开 电子 书 进 行 查看 。 


* 源 文件 ， 源 文件 第 11 章 \ 儿 童 类 网 站 .psd 
操作 视频 :视频 第 11 章 VL 童 类 网 站 


se 
扫 码 看 电子 书 


实例 56 一 儿童 类 网 站 的 主 休 和 Logo (全 
SS、 


网 页 中 的 文本 主要 包括 标题 、 正 文 、 信 息 和 文本 链接 等 形式 ， 
不 同形 式 的 文本 应 该 遵循 不 同 的 设计 规则 。 
下 面 制作 儿童 类 网 站 的 主体 和 Logo， 具 体操 作 步 骤 可 扫描 右 
侧 的 二 维 码 打开 电子 书 进行 查看 。 


实例 57 一 儿童 类 网 站 的 切 图 © 


网 页 的 切片 文件 一 般 都 会 存放 在 名 称 为 images 的 文件 夹 中 ， 
切片 名 称 不 能 包含 任何 中 文字 符 。 

下 面 为 儿童 类 网 站 进行 切 图 ， 具 体操 作 步 又 可 扫描 右 侧 的 二 维 
码 打 开 电子 书 进行 查看 。 


回放 机 
扫 码 看 电子 书 


[Dp 
扫 码 看 电子 书 


制作 手机 购物 网 站 p 


本 节 主 要 制作 一 款 手机 购物 网 页 ， 该 页 面 的 主要 难点 在 于 一 些 图 标的 绘制 。 其 中 购物 车 图 标 分 
为 车 身 和 数字 两 部 分 ， 车 身 的 制作 比较 烦琐 ， 数 字 部 分 就 容易 得 多 ， 同 时 制作 时 要 注意 合理 安排 每 
个 元 素 的 位 置 。 


这 是 一 款 手 机 电 商 平台 购物 的 网 站 页 面 。 该 页 面 的 背景 色 为 浅 灰 色 ， 低 调 且 具 有 科技 风格 。 当 
用 户 在 使 用 该 网 站 进行 购物 时 ， 可 以 清晰 明了 地 看 到 商品 的 各 种 介绍 ， 而 不 会 因为 页 面 颜色 过 多 而 
眼花 综 乱 。 适 当 加 入 一 些 暖色 调 ， 可 加 深 用 户 的 好 感 。 
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Photoshop CC 网 站 UI 设计 全 程 揭秘 (第 2 版 ) 


这 是 一 款 购物 类 的 网 站 ,所 以 自然 而 然 地 选用 了 禁 色 等 暖色 调 来 体现 热情 、 时 尚 和 青春 的 意象 。 
浅 灰色 和 白色 的 背景 也 很 好 地 烘托 了 清爽 的 感觉 , 局 部 点 缀 的 各 色 图 片 则 为 页 面 增添 了 不 少 趣味 感 。 


主 色 调 背景 色 点 级 色 


实例 58 一 手机 购物 网 站 的 商品 展示 页 “全 


前 面 讲解 如 何 制作 PC 端的 网 加 内 
站 ， 下 面 这 个 实例 是 移动 端 电 商 平 L; 
台 的 购物 网 页 。 由 于 版 面 篇 幅 限制 ， 
相 比 PC 端 网 页 而 言 移动 端 网 页 每 屏 
内 容 显 示 较 少 。 

具体 操作 步骤 可 扫描 右 侧 的 二 
维 码 打开 电子 书 进行 查看 。 


* 源 文件 :， 源 文件 第 11\ 手 机 购物 网 站 .psd 
操作 视频 视频 第 11 章 \ 手 机 购物 网 站 


实例 59 一 一 手机 购物 网 站 的 切 人 


使 用 "切片 工具 " 对 图 像 进行 分 割 , 在 "存储" 对话 框 中 选择 "所 国 : 
有 用 户 切 片 ”选项 ， 可 以 存储 所 有 用 户 选中 的 切片 。 3 

下 面 为 手机 购物 网 站 进行 切 图 ， 具 体操 作 步 又 可 扫描 右 侧 的 
二 维 码 打开 电子 书 进行 查看 。 


扫 码 看 电子 书 
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书 名 书号 定价 
HTML 5 网 页 设计 与 制作 全 程 揭秘 978-7-302-52699-5 69.80 元 
HTML 5+CSS 3+JavaScript 网 页 设计 与 制作 全 程 揭秘 978-7-302-52695-7 69.80 元 


PHP+MySQL+Dreamweaver 动 态 网 站 建设 全 程 揭秘 (第 2 版 ) 978-7-302-52685-8 69.80 元 
JSP+MySQL+Dreamweaver 动 态 网 站 建设 全 程 揭秘 978-7-302-52696-4 59.80 元 
DIV+CSS 3 网 页 样式 与 布局 全 程 揭秘 ( 第 3 版 ) 978-7-302-52931-6 69.80 元 
Photoshop CC 网 站 UI 设 计 全 程 揭秘 ( 第 2 版 ) ( 全 彩印 刷 ) 978-7-302-52686-5 79.80 元 
Photoshop CC 网 页 配色 设计 全 程 揭秘 ( 第 2 版 ) (全 彩印 刷 ) 978-7-302-53212-5 79.80 元 
Axure RP 8.0 网 站 产品 原型 设计 全 程 揭秘 ( 全 彩印 刷 ) 978-7-302-52694-0 79.80 元 
After Effects CC 移动 网 站 UI 交互 动 效 设计 全 程 揭 秘 ( 全 彩印 刷 ) 978-7-302-52918-7 89.80 元 


海量 设计 资源 超 值 赠送 


遍 166 个 设计 素材 和 源 文件 请 ”6 部 网 页 设计 电子 书 

遍 18 段 78 分 钟 的 案例 视频 教程 ee 
《Flash 绘 图 与 网 页 动画 制作 》 
《HTML 5 网 页 制作 》 


《Photoshop+Dreamweaver+Flash 网 站 
设计 与 制作 》 


《Photoshop 网 页 风格 与 配色 设计 》 
《网 站 用 户 体验 设计 》 


温 声 提示: 与 书 配套 的 素材 源 文件 、 多 媒体 语音 视频 教程 、PPT 课 件 ， 以 及 赠送 的 海量 设计 资源 ， 请 扫描 前 言 
末尾 处 的 二 维 码 下 载 获取 。 


清华 社 官方 微 信号 a | 
oh i 国 | 串 
| 9 中 山 


定价 : 79.80 元 


